Flutter Basic Training - 12 Minute Bootcamp

Flutter’s core promise is practical: build one UI codebase and ship apps across iOS, Android, the web, and desktop—while leaning on tooling that makes iteration fast. The training lays out a “build by numbers” path that gets from a blank project to working navigation, with repeated emphasis on productivity features like autocompletion, hot reload, and refactoring shortcuts.

Setup starts with installing Flutter (or using DartPad for browser-based editing), creating a new project via `flutter create`, and running it with `flutter run`. From there, the workflow is immediate: change a color or icon in `main.dart`, then use hot reload (press `r` in the terminal) to see UI updates instantly without a full rebuild. The lesson repeatedly ties speed to developer experience—especially IDE tooling that can autocomplete widget parameters and refactor code quickly.

The first real milestone is learning Flutter’s widget architecture. A Flutter app begins with `runApp`, which inflates a root widget into the screen. The training uses a `StatelessWidget` for a simple UI: a `MaterialApp` at the top for theming and routing, and a `Scaffold` as the common page layout. Widgets are configured through named parameters, and the UI is composed as a tree—small building blocks like `Text` combined into larger structures.

Layout is treated as the next essential skill. A `Container` acts like a flexible “box” (child widget plus styling such as margin, padding, size, and `decoration` for borders, gradients, shapes, and shadows). For centering, `Center` is the straightforward wrapper. The training also highlights when to avoid generic containers: use `Padding` for padding and `SizedBox` for fixed dimensions. For multiple children, `Row` and `Column` provide Flex-style layout, with the “main axis” controlling primary direction and alignment/spacing handled via axis alignment settings. When children need to share space, `Expanded` or `Flexible` adjusts flex behavior. For overlap, `Stack` enables layered UI, with `Positioned` (and alignment options) for precise placement.

Once pages get more complex, the training addresses overflow and scrolling. When content exceeds screen bounds, Flutter surfaces layout errors and points to its debugger. The fix is usually to wrap content in a scrollable widget like `ListView`, which supports vertical and horizontal scrolling and can lazily render items for performance. It also introduces the idea of building lists dynamically using builders—mapping data to widgets so long lists remain smooth.

State management comes next. A `StatelessWidget` can’t change over time, so the training converts it into a `StatefulWidget` using a refactor tool. Mutable data lives in the state class, and updates happen through `setState`, triggering rerenders. It demonstrates a counter using a `count` variable, string interpolation, and a button press to increment. Lifecycle hooks like `initState` (run once on initialization) are mentioned for tasks like fetching data.

Finally, navigation and polish: Flutter uses Navigator 1.0 for basic screen transitions. Pages are pushed onto a stack with `Navigator.push` and a `MaterialPageRoute`, and the back button triggers `Navigator.pop`. For visual impact, a `Hero` widget animates shared elements between routes using an ID—especially compelling when transitioning between lists of images.

By the end, the learner has built a functional app with UI composition, layout control, scrolling, stateful updates, and animated navigation—enough to start shipping real Flutter projects and then move on to a more advanced course involving Firebase.