Flutter has evolved into one of the top hybrid app development frameworks, thanks to its fast UI development and easy learning curve. Thousands upon thousands of developers push Flutter apps to the App Store and Play Store every month. But with great power comes great responsibility. After reviewing dozens of projects, I noticed recurring mistakes—some minor, others serious performance and scaling bottlenecks—that, if not addressed properly, can lead to major headaches in production apps. Here are 10 of the most common Flutter mistakes I observed, why they happen, and how to fix them. 1. Overusing StatefulWidgets The Mistake Developers often wrap whole screens with a StatefulWidget even when only a small part of the screen needs state updates. StatefulWidget The Fix Extract state to smaller components so only vital components are rebuilt. class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Column( children: [ CounterWidget(), // Only this rebuilds Expanded(child: HeavyContentWidget()), ], ), ); } } class CounterWidget extends StatefulWidget { @override _CounterWidgetState createState() => _CounterWidgetState(); } class _CounterWidgetState extends State<CounterWidget> { int counter = 0; @override Widget build(BuildContext context) { return Row( children: [ Text('Counter: $counter'), IconButton( icon: Icon(Icons.add), onPressed: () => setState(() => counter++), ), ], ); } } class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Column( children: [ CounterWidget(), // Only this rebuilds Expanded(child: HeavyContentWidget()), ], ), ); } } class CounterWidget extends StatefulWidget { @override _CounterWidgetState createState() => _CounterWidgetState(); } class _CounterWidgetState extends State<CounterWidget> { int counter = 0; @override Widget build(BuildContext context) { return Row( children: [ Text('Counter: $counter'), IconButton( icon: Icon(Icons.add), onPressed: () => setState(() => counter++), ), ], ); } } 2. Ignoring App Lifecycle Events The Mistake Improper handling of app lifecycle changes can lead to token mismanagement, improper connection changes handling, and even loss of unsaved user data in some cases. The Fix Use WidgetsBindingObserver to listen to lifecycle changes and handle relevant app components. WidgetsBindingObserver class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> with WidgetsBindingObserver { @override void initState() { super.initState(); WidgetsBinding.instance.addObserver(this); } @override void didChangeAppLifecycleState(AppLifecycleState state) { switch (state) { case AppLifecycleState.paused: saveUserProgress(); break; case AppLifecycleState.resumed: refreshSession(); break; default: break; } } @override void dispose() { WidgetsBinding.instance.removeObserver(this); super.dispose(); } @override Widget build(BuildContext context) => MaterialApp(home: HomeScreen()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> with WidgetsBindingObserver { @override void initState() { super.initState(); WidgetsBinding.instance.addObserver(this); } @override void didChangeAppLifecycleState(AppLifecycleState state) { switch (state) { case AppLifecycleState.paused: saveUserProgress(); break; case AppLifecycleState.resumed: refreshSession(); break; default: break; } } @override void dispose() { WidgetsBinding.instance.removeObserver(this); super.dispose(); } @override Widget build(BuildContext context) => MaterialApp(home: HomeScreen()); } 3. Neglecting Error Handling for Async API Calls The Mistake Failed async API calls can throw exceptions or even crash the app if not taken care of properly. The Fix Wrap your async API calls with try/catch block and handle failures gracefully: try/catch Future<void> fetchData() async { try { final data = await api.getData(); setState(() => items = data); } catch (e, stack) { log('Fetch error: $e', stackTrace: stack); ScaffoldMessenger.of(context).showSnackBar( SnackBar(content: Text('Failed to load data. Please try again.')), ); } } Future<void> fetchData() async { try { final data = await api.getData(); setState(() => items = data); } catch (e, stack) { log('Fetch error: $e', stackTrace: stack); ScaffoldMessenger.of(context).showSnackBar( SnackBar(content: Text('Failed to load data. Please try again.')), ); } } 4. Bloated Build Methods The Mistake Using just build() method to contain all of your widget code making it bulky and inefficient. build() The Fix Break down your build() method code into smaller components: build() Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Dashboard')), body: Column( children: [ UserGreeting(user: user), Expanded(child: ActivityFeed()), FooterNavigation(), ], ), ); } Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Dashboard')), body: Column( children: [ UserGreeting(user: user), Expanded(child: ActivityFeed()), FooterNavigation(), ], ), ); } 5. Hardcoding Screen Sizes The Mistake Using fixed hardcoded widths/heights values that can break UI on tablets or foldable devices. The Fix Use responsive layouts using MediaQuery: MediaQuery final width = MediaQuery.of(context).size.width; return Container( width: width * 0.8, child: Text('Responsive Design'), ); final width = MediaQuery.of(context).size.width; return Container( width: width * 0.8, child: Text('Responsive Design'), ); 6. Over-fetching Data The Mistake Fetching the same API data again and again unnecessarily. The Fix Cache data and manage it globally instead of calling the API every time: late Future<List<Post>> postsFuture; @override void initState() { super.initState(); postsFuture = api.fetchPosts(); } FutureBuilder( future: postsFuture, builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return CircularProgressIndicator(); } else if (snapshot.hasError) { return Text('Error: ${snapshot.error}'); } else { return PostList(posts: snapshot.data!); } }, ); late Future<List<Post>> postsFuture; @override void initState() { super.initState(); postsFuture = api.fetchPosts(); } FutureBuilder( future: postsFuture, builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return CircularProgressIndicator(); } else if (snapshot.hasError) { return Text('Error: ${snapshot.error}'); } else { return PostList(posts: snapshot.data!); } }, ); 7. Ignoring Null Safety Edge Cases The Mistake Using ! operator everywhere without understanding the risks that come with it. ! The Fix Always use null-aware operators to avoid null data errors: final username = user?.name ?? 'Guest'; if (user?.email != null) { sendEmail(user!.email!); } final username = user?.name ?? 'Guest'; if (user?.email != null) { sendEmail(user!.email!); } 8. Blocking the Main Thread The Mistake Running heavy tasks (e.g., JSON parsing, encryption, loading DB) on the main thread that jams or janks the UI. The Fix Use isolates or async functions to avoid main thread blockage: Future<int> processData(int value) async { return compute(_heavyTask, value); } int _heavyTask(int input) { // Heavy computation return input * 42; } Future<int> processData(int value) async { return compute(_heavyTask, value); } int _heavyTask(int input) { // Heavy computation return input * 42; } 9. Skipping Performance Profiling The Mistake App deployment without analyzing UI janks or widget rebuild counts that consume extra resources. The Fix Use flutter run --profile and Flutter DevTools. Add const where possible. Track rebuilds: Use flutter run --profile and Flutter DevTools. flutter run --profile Add const where possible. const Track rebuilds: 10. Poor Internationalization (i18n) Practices The Mistake Hardcoding strings into Text() widgets and ignoring localizations. Text() The Fix Use flutter_localizations or easy_localization to localize your app the proper way. flutter_localizations easy_localization Using easy_localization easy_localization Add the package into your pubspec.yaml file: Add the package into your pubspec.yaml file: pubspec.yaml dependencies: easy_localization: latest_version dependencies: easy_localization: latest_version Wrap your app with EasyLocalization Wrap your app with EasyLocalization EasyLocalization void main() async { WidgetsFlutterBinding.ensureInitialized(); await EasyLocalization.ensureInitialized(); runApp( EasyLocalization( supportedLocales: [Locale('en'), Locale('es')], path: 'assets/translations', // JSON files here fallbackLocale: Locale('en'), child: MyApp(), ), ); } void main() async { WidgetsFlutterBinding.ensureInitialized(); await EasyLocalization.ensureInitialized(); runApp( EasyLocalization( supportedLocales: [Locale('en'), Locale('es')], path: 'assets/translations', // JSON files here fallbackLocale: Locale('en'), child: MyApp(), ), ); } Add translation as JSON files at assets/translations/en.json Add translation as JSON files at assets/translations/en.json Add translation as JSON files at assets/translations/en.json assets/translations/en.json { "welcome": "Welcome to our app" } { "welcome": "Welcome to our app" } and at assets/translations/es.json assets/translations/es.json { "welcome": "Bienvenido a nuestra aplicación" } { "welcome": "Bienvenido a nuestra aplicación" } Use translations in Text() widgets Use translations in Text() widgets Text() Text('welcome'.tr()); Text('welcome'.tr()); Now adding new language support is just one JSON file away. Final Thoughts Flutter enables fast cross-platform app development and delivery, but speed can become a headache if not managed properly. Overusing StatefulWidget, hardcoding layouts, skipping lifecycle management, or ignoring i18n may not seem critical in the MVP phase, but they will create problems as your app scales. StatefulWidget
