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

Common Mistakes & Pitfalls in Flutter (By: Adil...

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.

GDG Lahore

March 11, 2023
Tweet

More Decks by GDG Lahore

Other Decks in Programming

Transcript

  1. 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
  2. Near native architecture Declarative Blueprints Superior DevTools Exceptional UI Kit

    Opensource, Codelabs, Community + + + + + Flutter and OTHERS
  3. // 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({});
  4. 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
  5. “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
  6. State concept can be complex than we think. Declarative Blueprints

    reflect states. Stateless vs. StatefulWidget Providor, GetX, BLoC State Management Pitfalls of Flutter
  7. 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
  8. 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
  9. 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) +
  10. 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
  11. 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
  12. 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; } } }
  13. 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.
  14. 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?