반응형

flutter.widget 21

ValueListenableBuilder<T>

ValueNotifier 선언 final ValueNotifier _counter = ValueNotifier(0); 데이터 커스텀 알리미.. //데이터 선언 class MyValuesObject{ String name; int age; ui.Image? thumbnail; } //알리미 선언 class MyNotifier extends ValueNotifier{ MyNotifier(MyValuesObject value) : super(value); } ==>ValueNotifier 에는 value getter/setter와 tostring() 만 있음. 상위 클래스로 가면 notify관련 메소드들이 있음. //알리미 변수 선언 final MyNotifier _myNotifier = MyNotifier(..

flutter.widget 2019.11.22

Card

Card는 카드 처럼 보이도록 만든 위젯입니다. 아래 그림 처럼 보이려면ListTile과 ButtonBar와 같이 사용해야합니다. 초록색이 ListTile 영역이고, 노란색이 ButtonBar 영역입니다. [전체소스] import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwa..

flutter.widget 2019.11.21

탭사용하기 (TabBar, Tab, TabBarView, TabController)

탭을 사용하려면 필요한 요소들이 많습니다. TabBar, Tab, TabBarView, TabController 등을 사용해야합니다. 1. TabController 생성2. Tab 생성TabBarView에 각 Tab에 해당하는 컨텐트 구성 1. TabController 생성탭을 사용하기위해서는 선택된 탭과 컨텐츠 섹션이 동기화가 되어야합니다. 이런 작업을 해주는 것이 TabContoroller 입니다.사용자가 만들거나, DefaultTabController를 사용해서 자동으로 만들 수 도 있습니다. DefaultTabController를 사용하는 것이 간단하죠. DefaultTabController는 TabContoroller과 상속트리에서 관점에서 크게 관련이 없습니다.DefaultTabControll..

flutter.widget 2019.11.20

LimitedBox (내용추가해야함)

Flutter Widget of the Week 39 일부 위젯에서는 상위요소에서 정의된 제한에 따라서 크기를 정해요. 하지만 ListView, Column, Row 같은 위젯에서는 하위요소 크기에 제한을 두지 않죠. 상위요소의 제한이 존재하지 않을 때, 상위 요소의 제한에 의존하는 위젯에 어떻게 기본값을 줄 수있을까요? LimitedBox 위젯이라면 할 수 있어요. LimitedBox의 상위요소가 무한한 경우에 LimitedBox로 하위요소의 기본값 크기를 줄 수있어요. 위젯의 상위요소가 크기를 제한할 때 LimitedBox에는 영향이 없어요. (ex. Container가 width와 height값을 가질 때 ) 리스트뷰를 사용할 때 리미티드 박스의 잠재력은 무한해져요. ListView의 스크롤 방향이..

flutter.widget 2019.11.15

NestedScrollView

스크롤링되는 위젯은 다른 스크롤링 되는 위젯들을 포함할 수 있습니다. 이들의 위치는 서로 연관되어 있습니다. NestedScrollView의 일반적인 사용 예제는 NestedScrollView의 헤더에는 headerSliverBuilder에 의해 빌드되는 SliverAppBar가 있고 그SliverAppBar의 bottom에 TabBar가 포함되고,NestedScrollView의 바디에는 TabBarView가 있어 TabBar에 선택된 탭에 해당하는 내용을 보여주는 경우입니다. Scaffold( body: DefaultTabController( length: _tabs.length, // This is the number of tabs. child: NestedScrollView( headerSliver..

flutter.widget 2019.11.15

CustomScrollView 와 SliverAppBar

sliver는 스크롤 가능한 영역을 의미합니다. 보통 CustomScrollView 안에 위치합니다. SliverAppBar는 일반적으로 CustomScrollView의 첫째 자식으로 사용됩니다. class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( slivers: [ SliverAppBar( title: Text("SliverAppBar"), ) ], ), ); }} CustomScrollView를 채우기위해서 SliverAppBar로 앱바를 만들었고, 이제 차일드위젯에 SliveList혹은 SliveGrid를 추가할 수 있습니다...

flutter.widget 2019.11.14

gridView

GridView 생성자들. 그리드 뷰 모양(로 갯수, 스페이싱등) 그리드뷰 아이템 count 콜백방식, 갯수지정 콜백방식 extend 콜백방식, 넓이지정 콜백방식 builder 클래스방식 갯수지정 : SliverGridDelegateWithFixedCrossAxisCount 넓이지정 : SliverGridDelegateWithMaxCrossAxisExtent 콜백방식 custom 클래스방식 갯수지정 : SliverGridDelegateWithFixedCrossAxisCount 넓이지정 : SliverGridDelegateWithMaxCrossAxisExtent 클래스 방식SliverChildBuilderDelegate GridView.count 그리드뷰를 사용하데 가장 쉬운 방법은 GridView.cou..

flutter.widget 2019.11.08