- StatelessWidget is immutable and does not have mutable state. It is used for UI elements that don't change over time.
- StatefulWidget can hold mutable state and can be rebuilt dynamically, making it suitable for elements that can change.
- ListView displays a scrollable list of widgets vertically or horizontally.
- GridView displays a 2D array of widgets, allowing for a grid layout.
- Use ListView for a single-column list, and GridView for a 2D grid or a list with multiple columns.
- Container is a versatile box model that can contain other widgets and apply various styling properties.
- Padding is a simple wrapper that adds padding around its child widget.
- State represents the mutable state of a StatefulWidget.
- BuildContext is a handle to the location of a widget in the widget tree and is required for building widgets.
- SingleChildScrollView is a generic scrollable container that can hold only one widget.
- ListView is specifically designed for displaying a scrollable list of widgets.
- InkWell provides a material ripple effect and is specifically designed for handling taps.
- GestureDetector is more generic and can handle various gestures such as taps, swipes, etc.
- Column arranges its children in a vertical column.
- Stack allows children to be positioned on top of each other, with the last child being the topmost.
- FutureBuilder is used for asynchronously building a widget once a future completes.
- StreamBuilder is used for asynchronously building a widget in response to stream events.
- Image.network loads an image from a network URL.
- Image.asset loads an image from the app's assets.
- Row arranges its children in a horizontal row.
- Column arranges its children in a vertical column.
- Expanded is a shorthand for Flexible with flex: 1.
- Flexible allows more fine-grained control over how space is distributed among multiple widgets.
- MainAxisAlignment defines how children are aligned along the primary axis (horizontal for Row and vertical for Column).
- CrossAxisAlignment defines how children are aligned along the cross axis.
- Material design is the standard Android-like design.
- Cupertino design is the iOS-like design.
- Future represents a single value or error that will be available at some time in the future.
- Stream represents a sequence of asynchronous events over time.
-
ListView.builder is used to efficiently create a scrollable list of widgets by lazily loading only the widgets that are currently visible on the screen.
-
Compare FlatButton, RaisedButton, and ElevatedButton in Flutter for handling button interactions.
-
FlatButton is a flat button with no elevation.
-
RaisedButton is a button with a default elevation.
-
ElevatedButton is an updated version of RaisedButton in Flutter 2.0.
- The const keyword is used to create widgets that won't be recreated unnecessarily, improving performance by avoiding unnecessary rebuilds.
- ListView.separated is similar to ListView.builder but allows adding separators between items.
- ListView.builder is used for efficiently building a list of widgets.
- const is used for compile-time constants, and the value must be known at compile-time.
- final is used for values that won't change after they're initialized, but the value can be known at runtime.
-
Type: SliverGridDelegate
-
Description: A delegate that controls the layout of the grid. It defines the size and positioning of items within the grid. There are two commonly used delegates:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 1.0,
)SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 1.0,
)- scrollDirection:
- Type: Axis (enum)
- Description: The axis along which the GridView scrolls. It can be either Axis.horizontal or Axis.vertical.
- CustomScrollView in Flutter is a powerful and flexible widget that allows you to create custom scrolling effects by combining multiple slivers. A sliver is a portion of a scrollable area, and CustomScrollView is composed of a list of slivers that work together to create complex scrollable layouts. It's often used to implement custom scrolling behaviors, such as parallax effects, sticky headers, or sliver-based UIs.
-
A sliver is a portion of a scrollable area. In the context of CustomScrollView, slivers represent various scrollable components like headers, footers, or custom scroll effects. There are different types of slivers:
-
SliverAppBar: A material design app bar that integrates with CustomScrollView.
-
SliverList: A sliver that displays a linear list of items.
-
SliverGrid: A sliver that displays a 2D array of items.
-
SliverToBoxAdapter: A sliver that contains a single box widget.
-
SliverPersistentHeader: A sliver that remains pinned at the top regardless of the scroll position.
-
SliverFillRemaining: A sliver that fills the remaining space.
-
slivers: List of slivers that make up the scrollable area.
-
scrollDirection: Axis along which the scroll view scrolls (either Axis.vertical or Axis.horizontal).
-
physics: The physics of the scroll view, controlling the scrolling behavior.
-
controller: A scroll controller that can be used to control the position of the scroll view.
CustomScrollView(
slivers: <Widget>[
SliverAppBar(
// App bar configuration
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('CustomScrollView Example'),
background: Image.network('https://example.com/image.jpg', fit: BoxFit.cover),
),
),
SliverList(
// List of items
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text('Item $index'),
);
},
childCount: 20,
),
),
],
)- Text is a simple widget for displaying a single style of text.
- RichText allows displaying multiple styles and formatting within a single text widget.
-
In Flutter's Row widget, the textBaseline property is used to align children along their baseline when they have different text baseline alignments. This is particularly useful when you have text in different children of the Row widget, and you want to align them based on a common baseline.
-
The textBaseline property accepts a value of type TextBaseline, which can have the following values:
-
alphabetic: Aligns the text such that the alphabetic baselines of the children match. This is the default behavior.
-
ideographic: Aligns the text such that the ideographic baselines of the children match. Ideographic baseline is used for CJK (Chinese, Japanese, Korean) characters.
This property is particularly useful when you have a row of text with different font sizes, and you want them to visually align along a common baseline.
- ClipRect clips its child to the shape of a rectangle, while ClipRRect clips its child to the shape of a rounded rectangle.
- Both are used for displaying dialogs, but AlertDialog is a full-screen dialog with rounded corners, while SimpleDialog is a smaller dialog with options.
- AspectRatio enforces a specific aspect ratio on its child, while FractionallySizedBox sizes its child based on a fraction of the available space.
- IndexedStack displays only one of its children at a time, based on the provided index, while PageView is a scrollable list of pages.
What is the difference between AnimatedContainer and TweenAnimationBuilder in Flutter for animation?
- AnimatedContainer automatically animates between two states, while TweenAnimationBuilder provides more control over the animation using a tween.
- Align positions a child within its parent using fractional values, while Positioned allows absolute positioning based on explicit coordinates.