CH.4 플러터UI: 주요 위젯, 테마, 레이아웃

C:\workspace\flutterSpace\weather_app ├── android ├── assets | └── fonts ├── build ├── ios ├── lib | ├── controllers | | └──forecast_controller.dart //앱에 필요한 저장소의 데이터를 초기화한다. | ├── main.dart //앱의 진입점이다. | ├── models | | └── // 모델 | ├── page | | └── // 페이지 | ├── styles.dart // 이 앱에서 사용할 다양한 색을 쉽게 참조하도록 만든 클래스 | ├── utils | | └── // 다양한 유틸 파일 | └── widget | | └── // 앱의 모든 커스텀 위젯 ├── pubspec.lock ├── pubspec.yaml // 플러터 전용 설정을 포함하는 파일 └── README.md

name: weather_app description: A new Flutter project. publish_to: 'none' # Remove this line if you wish to publish to pub.dev version: 1.0.0+1 environment: sdk: ">=2.7.0 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.0 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true //앱에서 머티리얼 디자인을 사용하기에 플래그는 true fonts: - family: Cabin // 폰트를 임포트할 때 앱에서 참조할 수 있도록 family 지정 fonts: // 3장에서 이미지를 나열했던 것처럼 사용하려는 폰트 나열. - asset: assets/fonts/Cabin-Regular.otf - asset: assets/fonts/Cabin-Bold.otf - asset: assets/fonts/Cabin-Italic.otf - asset: assets/fonts/Cabin-Medium.otf - asset: assets/fonts/Cabin-BoldItalic.otf - asset: assets/fonts/Cabin-MediumItalic.otf - asset: assets/fonts/Cabin-SemiBold.otf - asset: assets/fonts/Cabin-SemiBoldItalic.otf

void main() { WidgetsFlutterBinding.ensureInitialized(); // --- (1) AppSettings settings = AppSettings(); // ---(2) //가로 모드 허용하지 않음. SystemChrome.setPreferredOrientations( // --- (3) [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]) .then((_) => runApp(MyApp(settings: settings))); // --- (4) }

//runApp 함수 기본 코드 main() => runApp(MyApp());

SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, DeviceOrientation.portraitDown ]).then((_) => runApp(MyApp(settings: settings)));

myFutureMethod().then((returnValue) => ... do some code ... );

Future<Burger> orderBurgerFromServer() async { return await prepareBurger(); } orderBurgerFromServer() .then((Burger burger) => eatBurger(burger));

void main() { // 앱 진입점 WidgetsFlutterBinding.ensureInitialized(); AppSettings settings = AppSettings(); // Don't allow landscape mode SystemChrome.setPreferredOrientations( [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]) .then((_) => runApp(MyApp(settings: settings))); } class MyApp extends StatelessWidget { final AppSettings settings; const MyApp({Key key, this.settings}) : super(key: key); @override Widget build(BuildContext context) { //... return MaterialApp( // --- (1) title: 'Weather App', debugShowCheckedModeBanner: false, // --- (2) theme: theme, // --- (3) home: PageContainer(settings: settings), // --- (4) ); } }

const Scaffold({ Key key, this.appBar, this.body, this.floatingActionButton, this.floatingActionButtonLocation, this.floatingActionButtonAnimator, this.persistentFooterButtons, this.drawer, this.endDrawer, this.bottomNavigationBar, this.bottomSheet, this.backgroundColor, this.resizeToAvoidBottomPadding = true, this.primary = true, }) : assert(primary != null), super(key: key);

return Scaffold( appBar: PreferredSize( //---(1) preferredSize: Size.fromHeight(ui.appBarHeight(context)),// --- (2) child: TransitionAppbar(...) // ---(3) ), );

final theme = ThemeData( fontFamily: "Cabin", primaryColor: AppColor.midnightSky, // --- (1) accentColor: AppColor.midnightCloud, primaryTextTheme: Theme.of(context).textTheme.apply( // --- (2) bodyColor: AppColor.textColorDark, displayColor: AppColor.textColorDark, ), textTheme: Theme.of(context).textTheme.apply( bodyColor: AppColor.textColorDark, displayColor: AppColor.textColorDark, ), );

// BuildContext를 이용해 해당 위젯의 너비를 구하기 final width = MediaQuery.of(context).size.width;

return Scaffold( appBar: PreferredSize( preferredSize: Size.fromHeight(ui.appBarHeight(context)), child:... ), ),

final double kToolbarHeight = 56.0; double appBarHeight(BuildContext context) { // --- (1) return screenAwareSize(kToolbarHeight, context); } const double kBaseHeight = 650.0; double screenAwareSize(double size, BuildContext context) { double drawingHeight = MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top;// ---(2) return size * drawingHeight / kBaseHeight; }

Stack( children: <Widget>[ // ---(1) SlideTransition(// --- (2) position: _positionOffsetTween.animate( // --- (3) _animationController.drive( CurveTween(curve: Curves.bounceOut), ), ), child: Sun( animation: _colorTween.animate(_animationController), ), ), SlideTransition( position: _cloudPositionOffsetTween.animate( _weatherConditionAnimationController.drive( CurveTween(curve: Curves.bounceOut), ), ), child: Clouds( // --- (4) isRaining: isRaining, animation: _cloudColorTween.animate(_animationController), ), ), Column( // --- (5) verticalDirection: VerticalDirection.up, children: <Widget>[ forecastContent, mainContent, Flexible(child: timePickerRow), ], ), ], ),

Table( columnWidths: Map<int, TableColumnWidth>{}, // --- (1) border: Border(), // --- (2) defaultColumnWidth: TableColumnWidth(), // --- (3) defaultVerticalAlignment: TableCellVerticalAlignment(), // --- (4) children: List<TableRow>[]// --- (5) );

child: Table( border: TableBorder.all(width: 2.0, color: const Color(0xFFFFFFFF)), columnWidths: { 0: FixedColumnWidth(100.0), 2: FixedColumnWidth(20.0), 3: FixedColumnWidth(20.0), }, defaultVerticalAlignment: TableCellVerticalAlignment.middle, children:<TableRow>[...], );

Table( border: TableBorder.all(width: 2.0, color: const Color(0xFFFFFFFF)), columnWidths: { 0: FixedColumnWidth(100.0), 2: FixedColumnWidth(20.0), 3: FixedColumnWidth(20.0), }, defaultVerticalAlignment: TableCellVerticalAlignment.middle, children: List.generate(7, (int index) { // --- (1) ForecastDay day = forecast.days[index]; // --- (2) Weather dailyWeather = forecast.days[index].hourlyWeather[0]; // --- (3) var weatherIcon = _getWeatherIcon(dailyWeather);// --- (4) return TableRow( // --- (5) children: [ TableCell(...), ... ), ], ); }), ),

Column( // --- (1) verticalDirection: VerticalDirection.up, // --- (2) children: <Widget>[ forecastContent, // --- (3) mainContent, // --- (4) Flexible(child: timePickerRow), ], ),

class TimePickerRow extends StatefulWidget { final List<String> tabItems; // --- (1) final ForecastController forecastController; // --- (2) final Function onTabChange; // --- (3) final int startIndex; // --- (4) ... }

class TimePickerRow extends StatefulWidget { final List<String> tabItems; final ForecastController forecastController; final Function onTabChange; final int startIndex; const TimePickerRow({ Key key, this.forecastController, this.tabItems, this.onTabChange, this.startIndex, }) : super(key: key); @override _TimePickerRowState createState() => _TimePickerRowState(); } class _TimePickerRowState extends State<TimePickerRow> with SingleTickerProviderStateMixin { // --- (1) TabController _tabController; @override void initState() { _tabController = TabController( // --- (2) length: AnimationUtil.hours.length, vsync: this,// --- (3) initialIndex: widget.startIndex, ); _tabController.addListener(handleTabChange); // --- (4) super.initState(); } void handleTabChange() { if (_tabController.indexIsChanging) return; // --- (5) widget.onTabChange(_tabController.index); } //... }

void handleTabChange() { if (_tabController.indexIsChanging) return; // --- (5) widget.onTabChange(_tabController.index); }

@override Widget build(BuildContext context) { return TabBar( labelColor: Colors.black,// --- (1) unselectedLabelColor: Colors.black38, unselectedLabelStyle: Theme.of(context).textTheme.caption.copyWith(fontSize: 10.0), labelStyle: Theme.of(context).textTheme.caption.copyWith(fontSize: 12.0), indicatorColor: Colors.transparent, labelPadding: EdgeInsets.symmetric(horizontal: 48.0, vertical: 8.0), controller: _tabController, // --- (2) tabs: widget.tabItems.map((t) => Text(t)).toList(), // --- (3) isScrollable: true, // --- (4) ); }

Expanded( // --- (1) child: ListView.builder( shrinkWrap: true, // --- (2) itemCount: allAddedCities.length, // --- (3) itemBuilder: (BuildContext context, int index) { // --- (4) final city = allAddedCities[index]; return Dismissible( onDismissed: (DismissDirection dir) => _handleDismiss(dir, city), confirmDismiss: (DismissDirection dir) async => dir == DismissDirection.endToStart, background: Container( child: Icon(Icons.delete_forever), decoration: BoxDecoration(color: Colors.red[700]), ), key: ValueKey(city), child: CheckboxListTile( // --- (5) value: city.active, title: Text(city.name), onChanged: (bool b) => _handleCityActiveChange(b, city), // --- (6) ), ); }, ), )