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.
61 posts
Dart Fundamentals
- Dart Type Conversions and Static Variables ExplainedLearning Dart basics while starting Flutter. Sharing what I learned today about type conversions and static variables.
- Dart Enum and Composition - How to Organize Code?Continuing my Dart learning journey. Today I learned about enum structures and composition. Explaining with real-life examples.
- Dart Inheritance and Polymorphism - Parent-Child RelationshipLearning inheritance and polymorphism, one of the most important concepts of OOP. Looking at what we can do with extends, override and super keywords.
- Dart Interface and Implements - Adding Extra Features to ClassesLearning how to add extra features to our classes with abstract classes and the implements keyword.
- Dart Collections: Data Management with List, HashSet and HashMapLearning to work with data structures in Dart. Discovering the differences and use cases between List, HashSet and HashMap.
- Dart Error Handling: Try-Catch and Asynchronous OperationsLearning error handling with try-catch and asynchronous programming with async-await in Dart. Future and await concepts.
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 WidgetCentering objects with the Center widget and using Center in different scenarios.
- Flutter: Fine Alignment Operations with Align WidgetDetailed alignment operations and Alignment properties relative to the area it's in with the Align widget.
- Flutter: Inner Space Management with PaddingCreating inner space around widgets with the Padding widget and using EdgeInsets.
- Flutter: Sizing and Spacing with SizedBoxSizing operations and creating invisible spaces with the SizedBox widget.
- 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 WidgetCreating flexible spaces inside Row and Column with the Spacer widget and things to watch out for.
- Flutter: Expanded, Flexible, and Spacer ComparedLearn the difference between Expanded, Flexible, and Spacer in Flutter to avoid layout issues and control space distribution correctly.
- Flutter: Layout Control with Expanded, Flexible, and SpacerFour ready-made recipes combining Expanded, Flexible and Spacer: a toolbar, a card footer, form rows and a responsive split screen, with the reasoning.
- Flutter: Space Control with mainAxisSizemainAxisSize decides how much room a Row or Column takes on its main axis. max vs min, how constraints interfere, and the usual mistakes.
- Flutter: Row and Column Alignment Control with mainAxisSizeSet mainAxisAlignment.center and nothing moved? How mainAxisSize, mainAxisAlignment and crossAxisAlignment work together in Row and Column, with fixes.
- Flutter: Compact Dialogs and Button Groups with mainAxisSizeIs your dialog filling the whole screen? Ready-made recipes that use mainAxisSize.min to wrap dialogs, bottom sheets and button groups around their content.
- 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 LayoutBuilderCreating dynamic and responsive designs for different screen sizes with the LayoutBuilder widget.
- Flutter: Responsive Breakpoint Design with LayoutBuilderBuild responsive Flutter interfaces for mobile, tablet, desktop, and web by using LayoutBuilder with a breakpoint-based design approach.
Core Widgets and Input
- Flutter: Adding Images - Assets and Image.assetAdding images to Flutter project, pubspec.yaml configuration and using the Image.asset widget.
- 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: 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.
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 FlutterUsing Navigator in Flutter for page navigation, data transfer, and back stack management. push, pop, pushReplacement methods.
- 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 the Material 3 NavigationBar: property mapping table, labelBehavior, NavigationBarThemeData, a decision guide and an adaptive shell.
- 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.
Lists and Scrolling
- Flutter: Using SingleChildScrollView and ScrollViewA Flutter SingleChildScrollView guide: when Column plus scroll view is right, the keyboard overflow error, the Expanded unbounded height problem and the IntrinsicHeight fix.
- 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: SingleChildScrollView, ListView, NestedScrollViewCompare Flutter scroll widgets, understand performance tradeoffs, and solve nested scroll issues with better widget selection.
- Flutter: SliverAppBar for Sticky Headers and Search BarsUse SliverAppBar in Flutter to create modern headers that collapse, stay pinned, and include a search bar.
- Flutter: SliverAppBar for Category Headers and Search FieldsUse SliverAppBar to build category headers, search fields, and sticky top sections for scroll-based Flutter screens.
Async Data and State Management
- Flutter: Asynchronous Listing with FutureBuilderA Flutter FutureBuilder guide: reading snapshot states in the right order, the create-the-Future-in-build mistake, the initState fix and refreshing with setState.
- Flutter: Real-Time Data Streams with StreamBuilderUsing StreamBuilder in Flutter, difference between Stream and Future, real-time data streams, and creating custom streams with StreamController.
- Flutter: State Management with ProviderState management with Provider package in Flutter, ChangeNotifier, Consumer, MultiProvider usage and best practices.
- Flutter: Modern State Management with RiverpodState management with Riverpod package in Flutter, Provider vs Riverpod comparison, StateNotifier, StateProvider and best practices.
Animations
- Flutter: Zero Effort, Maximum Impact with Implicit AnimationsAdd professional animations without writing code using AnimatedContainer, AnimatedOpacity, AnimatedPositioned and more.
- 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 EffectsMake your Flutter app professional and fluid with Hero animations and custom page transition effects. SlideTransition, FadeTransition, ScaleTransition and more.
- Flutter: Hero Animation Speed and Transition TimingControl Flutter Hero animation speed, transition duration, and curve settings to create a smoother and more premium page transition experience.
- Flutter: Hero Animation Errors and Best PracticesLearn how to avoid duplicate tags, Material mismatches, and broken transitions in Flutter Hero animations.
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 after pulling down notification centre. The three concrete bugs I hit building Recapday's camera screen in Flutter, and the code that fixed each one.
- Firebase Auth With Your Own PHP Server: Token Verification and Account Deletion Without ComposerIdentity in Firebase, data on your own server. So how does PHP decide to trust the incoming token? RS256 verification on shared hosting without composer, plus the account-deletion flow both app stores require.
- Merging Videos on Device With ffmpeg: Turning Mixed Aspect Ratios Into One VlogSome vertical, some horizontal, some stills. How Recapday turns that mix into a single 1920x1080 vlog on the phone rather than on a server: blurred padding, non-ASCII text overlays, music, and compression I actually measured.
