Implementing complex UI on Flutter

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