Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Implementing complex UI on Flutter

Implementing complex UI on Flutter

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

#Mobile勉強会 #flutter #flutterjp

97a7f7899e0df28c3636b8d44bbe6578?s=128

Kenichi Kambara

November 16, 2021
Tweet

More Decks by Kenichi Kambara

Other Decks in Technology

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