Flutter Tutorials: From Dart Basics to Release
Dart fundamentals, the widget tree, layout, navigation, async data, state management and animations. Each lesson pairs a short explanation with working code, and most include a live DartPad example you can run in the browser. If you are starting from zero, read them in the order below.
57 posts
Dart Fundamentals
- Dart Type Conversions and Static Variables ExplainedSafe String-to-number conversion in Dart, int vs. double, as vs. is, and when static fields and methods make sense, with the mistakes learners make most.
- Dart Enum and Composition: How to Organize Your CodeDart 3 enums with fields and methods, exhaustive checks with switch expressions, and composition as a has-a relationship, with examples and common mistakes.
- Dart Inheritance and Polymorphism: A Practical GuideInheritance in Dart with extends, super and @override, polymorphism, abstract classes, safe type checks, and Dart 3's sealed, final and base class modifiers.
- Dart Interfaces and implements: Contracts for ClassesContracts with implements in Dart, Dart 3's interface class and abstract interface class, how mixins with differ, and an example of testable code.
- Dart Collections: List, Set and Map (HashSet, HashMap)When to choose List, Set or Map in Dart, how HashSet and HashMap differ, hashCode for equality, sorting, filtering, and using collections in Flutter.
- Dart Error Handling: Try-Catch and Asynchronous OperationsTargeted try-catch with on, rethrow, custom exceptions, Future, async/await, timeouts, parallel waiting, and safe setState calls in Flutter with Dart.
Getting Started with Flutter
- Getting Started with Flutter Mobile App DevelopmentFlutter from zero: installation overview, flutter doctor, creating and running your first project, project structure, hot reload and what to learn next.
- Flutter Basics: Widget Tree, Row, Column and StackAfter learning Dart, I finally transitioned to Flutter. On my first day, I'm learning the widget tree, Row, Column and Stack structures.
- Flutter: Creating Our Own WidgetsWriting custom widgets in Flutter: const constructors and super.key, required and optional parameters, widget class vs helper method, and common mistakes.
- Flutter Life Cycle: StatefulWidget and AppLifecycleStateUnderstanding Flutter StatefulWidget life cycle methods and application life cycle management. Using initState, dispose, didUpdateWidget, and setState.
Layout and Sizing
- Flutter: Detailed Usage of Center WidgetHow Center relates to Align, why it fills the available space, widthFactor, why it does not center vertically in a Column, and the common mistakes.
- Flutter: Fine Alignment Operations with Align WidgetPrecise placement with Align: the Alignment(x, y) coordinate system, FractionalOffset, widthFactor and heightFactor, Align vs Positioned in a Stack.
- Flutter: Inner Space Management with PaddingEvery EdgeInsets constructor, EdgeInsetsDirectional for RTL, SafeArea and keyboard insets, the mistakes that overflow or crash, and a login form example.
- Flutter: Sizing and Spacing with SizedBoxSizedBox for fixed sizes and gaps: expand, shrink and square constructors, SizedBox vs Container, why your size gets ignored, and common mistakes.
- Flutter: Expanding Space with Expanded WidgetA deep dive into Expanded: how the flex ratio is computed, nesting, why it only works inside Row and Column, and the three errors you see most often.
- Flutter: Flexible Spaces with Spacer WidgetWhat Spacer is under the hood, sizing gaps with flex, how it differs from SizedBox and mainAxisAlignment, and why it breaks in scrollable areas.
- Flutter: Expanded vs Flexible vs Spacer, With RecipesThe difference between Expanded, Flexible and Spacer, loose vs tight fit, and four recipes that combine them: toolbar, card footer, form rows, split screen.
- Flutter: Space and Alignment Control with mainAxisSizemax vs min in mainAxisSize, how constraints interfere, why mainAxisAlignment seems to do nothing, and recipes for dialogs, bottom sheets and button groups.
- Flutter: Layering Widgets with Stack and PositionedFlutter Stack and Positioned guide: how a Stack sizes itself, fit, alignment, clipBehavior, Positioned.fill, PositionedDirectional, badge and overlay recipes.
- Flutter: Screen-Based Scaling with MediaQuerySizing by screen with MediaQuery.sizeOf, paddingOf and textScalerOf; when LayoutBuilder or FractionallySizedBox is the better tool, and the common mistakes.
- Flutter: Screen Size-Based Design with LayoutBuilderLayoutBuilder vs MediaQuery, a breakpoint layout based on Material 3 window size classes, capping content width, and the unbounded height and intrinsic errors.
Core Widgets and Input
- Flutter: Adding Images - Assets and Image.assetAdding images to a Flutter project: pubspec.yaml setup, Image.asset, resolution folders, SVG, network images and the most common asset mistakes.
- Flutter: Card Widget and Design UsageFlutter Card guide: Material 3 Card.filled and Card.outlined, clipBehavior with images, tappable cards with InkWell, common mistakes and a product card.
- Flutter: Input Widgets and Status IndicatorsWhen to use Switch, Checkbox, Radio, Slider and SegmentedButton in Flutter, plus progress indicators, common mistakes and a sample settings screen.
- Flutter: Using TextField and TextEditingControllerFlutter TextField guide: TextEditingController and dispose, InputDecoration, keyboard types, inputFormatters, password fields, FocusNode and onChanged.
- Flutter: Form Widget and Input ValidationFlutter Form and TextFormField validation: validate() vs save(), autovalidateMode, focus handling, controller disposal and a complete login form.
- Flutter: DropdownButton Usage and FeaturesFlutter DropdownButton and DropdownButtonFormField, the Material 3 DropdownMenu, a dependent dropdown scenario and the value assertion fix.
- Flutter: Date and Time Pickers (DatePicker & TimePicker)Flutter showDatePicker and showTimePicker: date ranges, localized calendars, context.mounted, an appointment scenario and the off-by-one-day bug.
- Flutter: GestureDetector Usage and Touch EventsTap, drag and pinch events with Flutter's GestureDetector: how it differs from InkWell, HitTestBehavior, common mistakes and a zoomable photo example.
- Flutter: Using FloatingActionButton (FAB)Flutter FloatingActionButton: M3 sizes, extended FAB, positioning, hiding on scroll, the heroTag clash error and a reminders screen example.
Feedback and Menus
- Flutter: SnackBar and SnackBarAction UsageFlutter SnackBar with ScaffoldMessenger: undo actions, floating style, the queue problem and context errors after an await, all fixed.
- Flutter: AlertDialog Usage and CustomizationFlutter AlertDialog for confirmations, input and adaptive dialogs, plus fixes for context.mounted, StatefulBuilder and overflow bugs.
- Flutter: PopupMenuButton Usage and Menu StructuresFlutter PopupMenuButton for overflow menus: type-safe enums, onSelected vs onTap, a list row scenario and the mistakes to avoid.
- Flutter: BottomSheet and showModalBottomSheetFlutter's showModalBottomSheet: returning values, isScrollControlled, useSafeArea, showDragHandle, keyboard insets, DraggableScrollableSheet, persistent sheets.
App Structure and Navigation
- Flutter: AppBar Widget and CustomizationA practical Flutter AppBar guide: title, leading, actions and bottom, the Material 3 scrolled-under color change, and fixes for common mistakes.
- Navigation and Data Transfer Between Pages in FlutterPage navigation, data transfer and back stack management with Flutter's Navigator: push, pop, pushReplacement and the current PopScope for the back button.
- Flutter: BottomNavigationBar UsageFlutter BottomNavigationBar: currentIndex in state, keeping page state with IndexedStack, fixed vs shifting, the vanishing-items bug and a cart badge example.
- Flutter: BottomNavigationBar vs NavigationBarMigrating from BottomNavigationBar to Material 3 NavigationBar: property mapping, labelBehavior, a decision guide and an adaptive shell example.
- Flutter: TabBar and TabBarView UsageFlutter TabBar and TabBarView: DefaultTabController vs your own TabController, keeping tab state alive, Material 3 settings, and common mistakes.
- Flutter: Drawer Widget and Side Menu UsageBuild a side menu with Flutter Drawer: basic setup, the Material 3 NavigationDrawer, closing the menu before navigating, and the Scaffold.of context fix.
- Flutter: Light and Dark Themes with ThemeDataBuilding a Flutter theme with ThemeData: ColorScheme.fromSeed, light and dark themes, ThemeMode, reading with Theme.of, TextTheme, component themes, extensions.
Lists and Scrolling
- Flutter: SingleChildScrollView, ListView, NestedScrollViewSingleChildScrollView vs ListView vs NestedScrollView, the keyboard overflow error, Expanded's unbounded height error and a tabbed NestedScrollView setup.
- Flutter: ListView Widget UsageA practical Flutter ListView guide: lazy lists with builder, separated, itemExtent, the real cost of shrinkWrap and fixing the unbounded height error.
- Flutter: GridView Widget UsageA practical Flutter GridView guide: count, extent and builder, the two grid delegates, the childAspectRatio overflow error and the real cost of shrinkWrap.
- Flutter: SliverAppBar for Category Headers and Search FieldsSliverAppBar search field in bottom vs flexibleSpace, sticky category chips via SliverPersistentHeader, pinned/floating/snap combos and RenderSliver error.
Async Data and State Management
- Flutter: Asynchronous Listing with FutureBuilderFlutter FutureBuilder: reading snapshot states in the right order, the Future-in-build mistake, the initState fix and refreshing with setState.
- Flutter: HTTP Requests and REST APIsGET, POST, PUT and DELETE with Flutter's http package, JSON to model classes, status codes, timeouts and loading and error states with FutureBuilder.
- Flutter: Real-Time Data Streams with StreamBuilderFlutter StreamBuilder guide: connectionState for streams, initialData, broadcast vs single-subscription, closing the StreamController, listen() compared.
- Flutter: State Management with ProviderState management with Provider package in Flutter, ChangeNotifier, Consumer, MultiProvider usage and best practices.
- Flutter: Modern State Management with Riverpod 3State management in Flutter with Riverpod 3: Notifier, AsyncNotifier, ref.watch vs ref.read, family, autoDispose and migration notes for old StateNotifier code.
- Flutter: Local Data Storage with SharedPreferencesStoring theme and settings with shared_preferences in Flutter: SharedPreferencesAsync, WithCache vs the legacy API, the migration helper and what not to store.
Animations
- Flutter: Zero Effort, Maximum Impact with Implicit AnimationsAdd smooth animations with very little code using AnimatedContainer, AnimatedOpacity, AnimatedPositioned and other implicit animation widgets.
- Flutter Explicit Animations: AnimationController GuideCreate professional animations in Flutter with AnimationController, Tween, and AnimatedBuilder. Learn all the details of explicit animations.
- Flutter Hero Animation and Page Transition EffectsFlutter Hero animations: tag matching, flight duration and curve, flightShuttleBuilder, common mistakes, and custom page transitions with PageRouteBuilder.
Release and Real-Project Notes
- Creating and Setting Up App Icons in FlutterHow to add custom icons for both Android and iOS in your Flutter app? Automatic icon generation with flutter_launcher_icons package.
- Flutter Camera Without Forcing Orientation: Three Bugs and Their FixesA rotated preview, a freeze when recording starts and a dead camera: three Flutter camera bugs from Recapday and the code that fixed each one.
