Flutter

119 flashcards by MentisLibrary

Widgets and the three trees, layout constraints, state management from setState to Riverpod and BLoC, navigation, async and isolates, theming, platform channels, testing and performance, for developers building their first Flutter apps.

What is Flutter?
Google's open-source UI toolkit for building natively compiled apps for mobile, web, desktop and embedded devices from one Dart codebase.
Which language are Flutter apps written in?
Dart, a statically typed, garbage-collected language with sound null safety that compiles to native code (AOT) for release and runs on a JIT VM during development.
Hot reload vs hot restart
Hot reload injects changed source into the running Dart VM and rebuilds the widget tree while keeping app state; hot restart restarts the app from main() and loses state.
What does runApp do?
It takes the root widget, attaches it to the screen and makes it the root of the widget tree, forcing it to fill the whole display.
What does "everything is a widget" mean in Flutter?
Layout, padding, alignment, themes, gesture handling and the app itself are all widgets: immutable descriptions of one piece of the UI that compose into a tree.
Name Flutter's three trees
The widget tree (immutable configuration you write), the element tree (mutable instances that manage lifecycle and hold state) and the render object tree (layout, painting and hit testing).
StatelessWidget vs StatefulWidget
A StatelessWidget's build depends only on its constructor arguments and the context; a StatefulWidget pairs an immutable widget with a State object that persists across rebuilds and can change over time.
How does setState work?
It marks the State object dirty so the framework calls build again on the next frame; you mutate the fields inside the callback so the change and the rebuild request happen together.
List the main State lifecycle methods in order
initState, didChangeDependencies, build, then didUpdateWidget when the parent supplies a new widget, deactivate when removed from the tree and dispose when removed permanently.
What belongs in initState?
One-time setup that must happen when the State is first inserted: creating controllers, starting subscriptions, kicking off the initial data load.
What belongs in dispose?
Releasing anything the State owns that is not garbage collected on its own: TextEditingController, AnimationController, FocusNode, ScrollController, stream subscriptions and timers.
When is didUpdateWidget called?
When the parent rebuilds and supplies a new widget with the same runtimeType and key, so the existing State receives new configuration instead of being recreated.
What is a BuildContext?
A handle to a widget's location in the tree, used to look up ancestors such as Theme, MediaQuery, Navigator and inherited widgets.
When would you use the Builder widget?
When you need a BuildContext that sits BELOW a widget you are creating in the same build method, for example to call Scaffold.of from inside the Scaffold you just returned.
Why do widgets have keys?
A key tells the framework which Element and State to reuse when the widget tree changes, so stateful children keep their state when they are reordered, inserted or removed.
What is a GlobalKey?
A key unique across the whole app that also gives direct access to a widget's currentState, currentContext and currentWidget.
Why mark widget constructors const?
A const widget instance is created once at compile time and the framework skips rebuilding it, because the identical instance is handed back on every parent rebuild.
What does Scaffold provide?
The Material page skeleton: appBar, body, floatingActionButton, drawer, bottomNavigationBar, and the hosting of snack bars and bottom sheets.
MaterialApp vs CupertinoApp
Both set up a Navigator, localization, MediaQuery and Directionality; MaterialApp adds Material theming and page transitions, CupertinoApp adds iOS-style defaults.
How do Row and Column lay out children?
Row places children horizontally and Column vertically; both are Flex widgets with mainAxisAlignment along the direction and crossAxisAlignment across it.
Expanded vs Flexible
Expanded forces its child to fill the remaining main-axis space (FlexFit.tight); Flexible lets the child be smaller than the available space (FlexFit.loose).
State Flutter's one-line layout rule
"Constraints go down. Sizes go up. Parent sets position." A parent passes min and max width and height to each child, the child picks a size within them, and the parent decides where to put it.
What is Container?
A convenience widget that combines padding, margin, a decoration, size constraints, alignment and a transform around one optional child.
How do Stack and Positioned work together?
Stack paints children on top of each other; a Positioned child pins itself to the Stack's edges with top, left, right, bottom, width or height.
When is SizedBox the right widget?
For fixed spacing or a fixed size: SizedBox(height: 16) as a gap, SizedBox.shrink() as an empty placeholder, SizedBox.expand() to fill the parent.
How is padding specified?
With Padding (or Container.padding) taking an EdgeInsets: all, symmetric(horizontal:, vertical:), only(left:, top:) or fromLTRB.
Why use ListView.builder instead of ListView(children: [...])?
ListView.builder creates items lazily as they scroll into view, so a list of thousands costs only what is visible; the children form builds every item up front.
What does ListView.separated add?
A separatorBuilder called between items, so dividers or gaps come from the list instead of being baked into each item.
How do you build a grid?
GridView.count(crossAxisCount: n) for a fixed column count, or GridView.builder with a SliverGridDelegateWithFixedCrossAxisCount or SliverGridDelegateWithMaxCrossAxisExtent for lazy building.
SingleChildScrollView vs ListView
SingleChildScrollView scrolls one fully built child, right for a form or a small settings page; ListView is a lazy scrolling list for long or unknown-length content.