어플화면에서 상품목록들이 나열되어 있을 때 상품리스트 중 하나를 클릭하면 상세화면으로 넘어가게 된다 그때, 해당하는 상품정보를 상세화면으로 이동하면서 데이터를 전달해 주게끔 하는 것을 해보겠다. 1. Route 만들기 일단 페이지가 2개이상 필요하기 때문에, 만들어야 한다. 일단 아래의 링크를 타고 라우터와 페이지 2개를 준비하도록 한다. https://initstory.tistory.com/121 Flutter Route 사용하기 Flutter에도 Route가 있다니 참 놀랍다 React나 Vue 같은 웹프로그래밍에서만 써봤는데, Flutter에도 있으니 바로 써보도록 하겠다 1. 기본코드 main.dart import 'package:flutter/material.dart'; import 'packa..
우리가 스마트폰을 사용할 때, 스크롤을 밑으로 쫙 내리면 상단 부분에 새로고침이 표시되는 것을 확인할 수 있다 이번에는 그걸 한번 해보겠다. 1. 기본 코드 일단 기본코드 main.dart와 연습용 practice_page.dart를 준비한다. main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages/practice_page.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of y..
CustomScrollView라는 단어만 봐도 뭔가 커스텀이 가능한 스크롤이 있는 화면같은 느낌이다 CustomScrollView는 보통 Sliver라는 단어가 들어가는 위젯과 함께 쓰는 듯 하니 한번 해보겠다 1. 코드 생김새 위의 코드를 보면, 우선 CustomScrollView가 제일 엄마이고, 그안에 slivers라는 배열을 선언한 것을 볼 수 있다 slivers 배열안에는 SliverGrid가 있는 것을 볼 수가 있는데, SliverGrid이외에 Sliver****라는 위젯을 사용할 수가 있다 우선 문법으로는 위와같이 사용하면 된다. 2. 전체 코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice..
항상 어딘가를 가면 List가 존재한다. 피할 수도 없다 List를 만드는 방법은 하나씩 하나씩 넣으면 된다. 하지만, 누군가가 만든 List를 쓰고 싶을 때는 어떻게 해야 할까? 그렇다 받은 List만큼 반복해서 출력하면 된다 그때 List.generate를 사용하면 된다. 약간 gridView.builder도 반복문을 돌렸지만 약간 다르다. 구분 지어 나열하냐 안 하냐 차이인 듯하다 List.generate: 빠꾸 없이 밑으로 반복 gridView.builder: 옆으로 몇 개씩 나열하면서 밑으로 반복 이제 시작해 보도록 하겠다 1. 기본 코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages..
ListTitle이란 ListView와 자주 쓰이며 제목과 부제목을 가진 리스트 중 하나를 생각하면 된다 예를 들면 카톡 친구목록에서 이름과 대화명이 있다. 거기에 이름이 조금더 크고 대화명이 조금 더 작다 그렇게 하나의 묶음을 편하게 쓸 수 있도록 한 것이 ListTitle이다 이름은 title이라 하고 대화명은 subTitle이라고 생각하면 편하다 추가해서 leading이라는 옵션도 있는데 AppBar에서 처럼 로고를 넣듯이 ListTitle에는 프로필 사진을 생각하면 된다 1. 기본코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages/practice_page.dart'; void main(..
우리가 스마트폰으로 어플을 사용하다 보면 항상 정해진 느낌이 있다 상단에는 Appbar가 있고 메뉴버튼이나 로고 등이 있고 하단에는 NavigationBar가 있고 홈버튼 프로필보기 버튼 등이 있다 AppBar는 한번 만든적이 있으니 이번에는 Bottom에 3개의 메뉴가 있는 NavigationBar를 만들어 볼 것이다 1. 기본 코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages/practice_page.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}..
Flutter Wrap위젯은 이미지나 Container 같은 위젯들을 가로로 여러 장을 나열했을 때, 화면을 넘어 Overflow가 되는 경우가 있다 이때, Overflow가 되는 위젯을 아래로 배치해주는 것이 Wrap위젯이다 그럼 한번 사용해 볼까 1. 기본코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages/practice_page.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is th..
요즘 웹 같은 경우는, 웬만하면 다 반응형이다. 화면 넓이가 크거나 작거나 디자인이 깨지지 않는 게 트렌디하기 때문이다. 반응형을 만들 때, 어려운 점이 가로로 사진들이 배치되어 있는데 화면 가로 사이즈가 줄어들 때 사진도 같이 줄어들어서 촌스럽게 변하는 경우가 있다 이때는 슬라이더로 처리하거나 minWidth나 minHeight같이 최소 사이즈를 정해서 대처를 한다 이번시간에는 Flutter에서 사이즈를 정하는 것을 해보겠다 1. 기본코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages/practice_page.dart'; void main() { runApp(const MyApp()); } ..
