Implementing complex UI on Flutter

Mobile勉強会のLT資料です。
"Implementing complex UI on Flutter"

#Mobile勉強会 #flutter #flutterjp

Transcript

1. 2021.11.16 Kenichi Kambara (@korodroid) Mobileษڧձ 
 Wantedly × νʔϜϥϘ Implementing complex UI on Flutter
2. About me •Mobile App Development •Speeches (e.g. 9 International confs.) •Writings (e.g. 5 Dev Books) •[Of fi cial] Evangelist at NTT TechnoCross •[Private] iplatform.org Kenichi Kambara (@korodroid)
3. My Activity (Sekaiphone: Speech Translation) Android: Kotlin, iOS: Swift Android/iOS:Flutter
4. Problems (Complex UI on Flutter) 
5. Motivation (Complex UI on Flutter)  How to implement ef fi ciently 1. Adding Images 2. Stacking Images 3. Layout & Positioning Resources … 100 
 images
6. 1. Adding Images  pubspec.yaml // Before Widget _getKokkiImage() { return Image.asset("assets/images/imgKokkiLeftl.png"); } flutter: assets: - assets/images/imgKokkiLeftl.png # - assets/images/
7. 1’. Adding Images (Refactoring)  // After flutter: assets: - assets/images/imgKokkiLeftl.png # - assets/images/ pubspec.yaml ref. FlutterGen: https://github.com/FlutterGen/ fl utter_gen
8. 2. Stacking Images (How?)  ref. Stack: https://api. fl utter.dev/ fl utter/widgets/Stack-class.html + +
9.  Widget _getKokkiImage() { return Stack( children: [ Assets.images.kokkiEn.image( height: 80.0, ), Assets.images.imgKokkiLeftl.image( height: 80.0, ), Assets.images.imgSpeak.image( height: 24, ), ], ); ref. Stack: https://api. fl utter.dev/ fl utter/widgets/Stack-class.html 2. Stacking Images
10. 3. Layout & Positioning  // Before Widget _getKokkiImage() { return Stack( children: [ Assets.images.kokkiEn.image( height: 80.0, ), Assets.images.imgKokkiLeftl.image( height: 80.0, ), Assets.images.imgSpeak.image( height: 24, ), ], );
11. 3. Layout & Positioning (How?)  ref. Positioned: https://api. fl utter.dev/ fl utter/widgets/Positioned-class.html
12. 3. Layout & Positioning  // After Widget _getKokkiImage() { return Stack( children: [ Assets.images.kokkiEn.image( height: 80.0, ), Assets.images.imgKokkiLeftl.image( height: 80.0, ), Positioned( left: 4.0, top: 60.0, child: Assets.images.imgSpeak.image( height: 24, ), ), ), ], ); }
13. Please let me know if you have any requests 
 such as technical speeches, technical writings and so on. Facebook:http://fb.com/kanbara.kenichi Twitter:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid Thank you so much