Tagged with #layouts

Browse all tags
The CarouselView Widget

The CarouselView Widget

#dart
#flutter
#layouts
#widgets

Since Flutter 3.24, a new CarouselView widget is available. You can set the children's size with itemExtent and shrinkExtent, and use it with any widgets as children.

The OverflowBar Widget

The OverflowBar Widget

#dart
#flutter
#layouts
#widgets

OverflowBar makes it easy to layout your widgets in a row unless they overflow the available horizontal space, in which case they're arranged as a column.

Use SizedBox.shrink() to return an empty box

Use SizedBox.shrink() to return an empty box

#dart
#flutter
#widgets
#layouts

If you need to return an empty widget, SizedBox.shrink() is more performant than an empty Container.

Responsive Flutter Layout with SizedBox & Center

Responsive Flutter Layout with SizedBox & Center

#dart
#flutter
#layouts

Some helper widgets for creating Flutter layouts that grow horizontally up to a given width, then remain fixed at that width.

Flutter Tip: Use Composition Aggressively

Flutter Tip: Use Composition Aggressively

#dart
#flutter
#layouts

Create small, reusable widgets that are easier to reason about, and banish the massive build method from existence!

How to replace SizedBox with compile-time constants for better performance

How to replace SizedBox with compile-time constants for better performance

#dart
#flutter
#layouts
#widgets

A useful tip to write more performant code when using SizedBox as a gap between widgets inside a Row or Column layout.

Add Fixed Spacing with the Gap Widget

Add Fixed Spacing with the Gap Widget

#dart
#flutter
#layouts

How to easily add fixed spacing inside Flex widgets such as Columns and Rows or scrolling views.

Responsive layouts in Flutter: Split View and Drawer Navigation

Responsive layouts in Flutter: Split View and Drawer Navigation

#dart
#flutter
#layouts
#state-management
#riverpod

How to implement a responsive layout in Flutter by using a split view on large screens and drawer navigation on mobile.

How to create a Flutter GridView with content-sized items

How to create a Flutter GridView with content-sized items

#dart
#flutter
#layouts

GridView is only suitable for items with a fixed aspect ratio. Here's how to use the flutter_layout_grid package to render responsive layouts with variable item sizes.

How to build a Chat Messaging UI in Flutter

How to build a Chat Messaging UI in Flutter

#dart
#flutter
#layouts

A simple and elegant approach to build a Chat Messaging UI with DecoratedBox, Align, and Padding widgets in Flutter.

Adding top and bottom separators with ListView.separated

Adding top and bottom separators with ListView.separated

#flutter
#dart
#layouts

How to make your ListViews feel native on iOS by adding top and bottom separators.

Flutter Slivers Overview: SliverList, SliverGrid, SliverToBoxAdapter, SliverFillRemaining

Flutter Slivers Overview: SliverList, SliverGrid, SliverToBoxAdapter, SliverFillRemaining

#flutter
#dart
#layouts

In-depth overview of Slivers and how to use them (part 2). Includes a demo app showing how to use SliverList, SliverGrid, SliverToBoxAdapter, SliverFillRemaining.

Flutter Slivers Overview: SliverAppBar, SliverPersistentHeader

Flutter Slivers Overview: SliverAppBar, SliverPersistentHeader

#flutter
#dart
#layouts

In-depth overview of Slivers and how to use them (part 1). Includes a demo app showing how to use SliverAppBar and SliverPersistentHeader.

Flutter: The power of small and reusable widgets

Flutter: The power of small and reusable widgets

#flutter
#dart
#layouts
#refactoring

Let's learn about color gradients, composition, writing reusable UI code, and CupertinoSegmentedControl.

Flutter: Adding Animated Overlays to Your App

Flutter: Adding Animated Overlays to Your App

#flutter
#dart
#navigation
#layouts

Let's see how to use some custom code to add animated overlays and reveal action options from a FAB.

Flutter: BottomAppBar Navigation with FAB

Flutter: BottomAppBar Navigation with FAB

#flutter
#dart
#navigation
#layouts

How to dock a floating action button in the middle of a BottomAppBar.

Flutter Layouts Walkthrough: PageView, ListView, GridView, Slivers, CustomScrollView

Flutter Layouts Walkthrough: PageView, ListView, GridView, Slivers, CustomScrollView

#flutter
#dart
#layouts

How to build layouts with scrollable pages, lists, grids, and other convenience widgets. Includes slivers and their usage to create a hero image effect.

Flutter Layouts Walkthrough: Row, Column, Stack, Expanded, Padding

Flutter Layouts Walkthrough: Row, Column, Stack, Expanded, Padding

#flutter
#dart
#layouts

How to build basic layouts in Flutter. Also included: MainAxisAlignment, MainAxisSize, CrossAxisAlignment, Baseline, AlignmentDirectional, LayoutBuilder, SizedBox.

Browse all tags