Common Mistakes & Pitfalls in Flutter (By: Adil Soomro) - Flutter Forward Extended 2023

Talk by Adil Soomro (https://www.linkedin.com/in/adilsoomro/) at Flutter Forward Extended 2023 by GDG Lahore.

Transcript

1. Common Mistakes and Pitfalls in Flutter How to avoid
2. Adil Soomro Co Founder BooleanBites Ltd
3. Agenda Flutter and OTHERS The Good, The Bad, The Avoidables Project Structure Best Practices Performance Enhancement Flutter Impeller 1 2 3 4 5 What we built & learned 6
4. Near native architecture Declarative Blueprints Superior DevTools Exceptional UI Kit Opensource, Codelabs, Community + + + + + Flutter and OTHERS
5. // Imperative Style ViewB b = new ViewB(...) b.setColor(red) b.clearChildren() ViewC c3 = new ViewC(...) b.add(c3) String text = 'Large Heading'; TextView textView = new TextView(...) textView.setText(text); ... text = 'Large Heading Changed'; textView.setText(text); // Declarative Style return ViewB( color: red, child: return ViewB(), ) String text = 'Large Heading'; ... Text( text, ), ... text = 'Large Heading Changed'; setState({});
6. Exciting start, easy development creates misconception that everything is going to be smooth. Once you are done with simple UI, things are going to get pretty complex. There’s complexity ahead. Prepare for that. Beginner’s Approach Pitfalls of Flutter
7. “Everything is widget” Whether it is a full page or small portion of screen. It is widget. No significant separation of business logic from UI. Use BLoC, MVC, MVVM Separation of Concern Pitfalls of Flutter
8. State concept can be complex than we think. Declarative Blueprints reflect states. Stateless vs. StatefulWidget Providor, GetX, BLoC State Management Pitfalls of Flutter
9. Easy styling of widgets, quick themes, and countless customization options can mislead. Excessive customization and theming, Platform specific UXes can lead to fragmented and inconsistent user experience. Learn reasonable CSSing before actual development. Find balanced approaches to target multiplatforms. Pitfalls of Flutter Themes & styling
10. Quick solutions available on internet for Flutter can lead to issues - Incomplete understanding of the code. - Quick solutions are often designed to address a specific problem. - Quick solutions may have compatibility issues. Take the time to understand the solutions. Pitfalls of Flutter Quick solution traps
11. Use a design Pattern. Any Pattern. Leverage Theme on app level Consider Localization at start Avoid too much dependencies if possible Break code into smaller units + + + + + Project structure best practices Use source control (git) +
12. Treat build() method special. Break UI into Stateful and StatelessWidgets Widgets instead of functions. ListView.Builder vs Column. Be lazy! Use Cache for calculations, repetitive work. + + + + + App performance optimization
13. Text( 'Large Heading', style: TextStyle( fontWeight: FontWeight.bold, fontFamily: "Ubuntu", color: Colors.black, fontSize: 25.0), ), Text( 'Really long description', style: TextStyle( fontWeight: FontWeight.bold, fontFamily: "Ubuntu", color: Colors.black, fontSize: 15.0), ) Text( 'Large Heading', style: Theme.of(context).textTheme.headlineLarge, ), Text( 'Really long description', style: Theme.of(context).textTheme.bodyMedium, ) Theme.of(context).textTheme.bodyMedium
14. Text( Localization.localized("Hello World"), style: Theme.of(context).textTheme.bodyMedium, ) class Localization { // a method to localize a string static String localized(String key, {List? params}) { // if implemented localization call that if (localizationApproachAvailable == true) { return someLocalizationAppraoch(key); } else { // will do something in future, return as it is return key; } } }
15. Flutter has its own graphic engine. It was built on Skia. Its responsible for all the graphic rendering during app run. Flutter has issue of janky animation on first run on iOS. Because the shaders that are responsible for animation cannot be compiled on iOS before the animation prior use. Impeller is Flutter attempt to address this issue. It is currently in dev mode. It has significant performance improvements. Flutter Impeller iOS UI Jank and its solution.
16. Houzi - real estate app. • Fully customizable theme from remote. • Dynamic home, filters, menus, details. • Built for developers. Houzi Builder • Desktop app built in Flutter. • Dynamic settings for the app. What we built?
17. THANK YOU!