[potatotips #84]Supporting Large Screen on Flutter

This is the slide, "Supporting Large Screen on Flutter" on potatotips 84.
#flutter #flutterjp #potatotips

Transcript

1. 2023.09.26
   
   
   Kenichi Kambara (@korodroid)
   potatotips #84
   Supporting Large Screen on Flutter
   

   View Slide

2. About me
   •Mobile App Development
   
   
   •Speeches (e.g. 15 Int’l/100+ Domestic)
   
   
   •Writings (e.g. 8 Dev Books)
   
   
   •[Of
   fi
   cial] Evangelist at NTT TechnoCross
   
   
   •[Private] iplatform.org
   Kenichi Kambara (@korodroid)
   

   View Slide

3. About my Flutter product (Private works)
   Sekaiphone Pro(Flutter/Kotlin/Swift) MyToDo(Flutter)
   

   View Slide

4. My Motivation
   
   + = 2 Pane
   6OEFSEFWFMPQNFOU
   

   View Slide

5. Providing better UI for Large Screen on Flutter
   
   https://learn.microsoft.com/en-us/dual-screen/
   fl
   utter/mediaquery
   

   View Slide

6. Solution
   
   1. Using MediaQuery API
   
   
   2. Another approach
   

   View Slide

7. 1. Using MediaQuery API
   var isTwoPane =
   

   MediaQuery.of(context).size.width >= 600;
   
   body: isTwoPane ? twoPaneWidget(): onePaneWidget(),
   

   View Slide

8. 2. Another approach
   
   https://pub.dev/packages/dual_screen
   

   View Slide

9. 2. Using TwoPane Widget
   
   body: TwoPane(
   startPane: mainWidget(),
   endPane: sideWidget(),
   paneProportion: 0.3,
   panePriority:
   isTwoPane ? TwoPanePriority.both : TwoPanePriority.start,
   ),
   var isTwoPane =
   

   MediaQuery.of(context).size.width >= 600;
   

   View Slide

10. Screenshot
    
    

    View Slide

11. This package also supports
    
    import 'package:dual_screen/dual_screen.dart';
    
    
    DualScreenInfo.hingeAngleEvents.listen((double hingeAngle) {
    
    
    print(hingeAngle);
    
    
    });
    
    
    DualScreenInfo.hasHingeAngleSensor.then((bool hasHingeSensor) {
    
    
    print(hasHingeSensor);
    
    
    });
    
    
    https://pub.dev/packages/dual_screen#hinge-angle-sensor
    

    View Slide

12. Happy Coding for Large/Daul/Foldable
    

    with MediaQuery API, Useful packages
    Conclusion
    

    View Slide

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
    
    
    X:@korodroid
    
    
    LinkedIn:http://www.linkedin.com/in/korodroid
    Thank you so much
    

    View Slide