[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
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)
3. About my Flutter product (Private works) Sekaiphone Pro(Flutter/Kotlin/Swift) MyToDo(Flutter)
4. My Motivation  + = 2 Pane 6OEFS
   EFWFMPQNFOU
   
   
   
   
5. Providing better UI for Large Screen on Flutter  https://learn.microsoft.com/en-us/dual-screen/ fl utter/mediaquery
6. Solution  1. Using MediaQuery API 2. Another approach
7. 1. Using MediaQuery API var isTwoPane = 
 MediaQuery.of(context).size.width >= 600;  body: isTwoPane ? twoPaneWidget(): onePaneWidget(),
8. 2. Another approach  https://pub.dev/packages/dual_screen
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;
10. Screenshot 
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
12. Happy Coding for Large/Daul/Foldable 
 with MediaQuery API, Useful packages Conclusion
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