Time Limited Offer

50% off Flutter in Production

Spring Sale ends May 8th

View Offer

Tagged with #widgets

Browse all tags
Test your UI with ThemeData.platform

Test your UI with ThemeData.platform

#dart
#flutter
#widgets

By overriding ThemeData.platform inside MaterialApp, you can quickly test all your adaptive widgets and any conditional code that checks the platform.

Adaptive Alert Dialog (Material, Cupertino)

Adaptive Alert Dialog (Material, Cupertino)

#dart
#flutter
#widgets

A simple alert dialog that supports adaptive mode, default and cancel actions, destructive style, and dismissible mode.

How to use debugRepaintRainbowEnabled

How to use debugRepaintRainbowEnabled

#dart
#flutter
#widgets

debugRepaintRainbowEnabled helps you discover widgets/areas that unexpectedly repaint in your app. Here's how to use it.

TextFormField Setup for Numeric Inputs

TextFormField Setup for Numeric Inputs

#dart
#flutter
#widgets

When working with forms in Flutter, numeric inputs need special attention. To improve the user experience, set the appropriate keyboardType and inputFormatters.

Hotkeys with CallbackShortcuts

Hotkeys with CallbackShortcuts

#dart
#flutter
#widgets

The CallbackShortcuts widget makes it easy to add keyboard shortcuts to your Flutter app. Here's how to use it.

Responsive Split View in Flutter

Responsive Split View in Flutter

#dart
#flutter
#layouts
#widgets

Here's how to create a responsive split-view widget that works on mobile, desktop and web.

The debugFillProperties Method

The debugFillProperties Method

#dart
#flutter
#widgets

If you add a debugFillProperties() method to your custom widget classes, all your custom widget properties will show in the DevTools.

Using Stack and FractionallySizedBox

Using Stack and FractionallySizedBox

#dart
#flutter
#widgets

Here's how to overlay multiple widgets inside a Stack and constrain their size and position with Positioned and FractionallySizedBox.

The ListWheelScrollView Widget

The ListWheelScrollView Widget

#dart
#flutter
#widgets

If you need to select between a small list of values but have limited vertical space, you can use a ListWheelScrollView.

Text Style with Tabular Figures

Text Style with Tabular Figures

#dart
#flutter
#widgets

If you want to render fixed width (monospaced) digits, set FontFeature.tabularFigures() inside your TextStyle.

New Spacing Argument in Row/Column (Flutter 3.27)

New Spacing Argument in Row/Column (Flutter 3.27)

#dart
#flutter
#widgets
#layouts

Since Flutter 3.27, you can pass a spacing argument to your Row and Column widgets (rather than using SizedBox).

The Banner Widget

The Banner Widget

#dart
#flutter
#widgets

You can use the Banner widget to place a small diagonal banner over a child widget. For more custom styling, build your own using a custom painter.

Stylish Text with ShaderMask and LinearGradient

Stylish Text with ShaderMask and LinearGradient

#dart
#flutter
#widgets

To create a stylish Text, use the ShaderMask widget with a shaderCallback that returns a LinearGradient with begin and end points, along with a list of colors.

How to add a Badge to an IconButton

How to add a Badge to an IconButton

#dart
#flutter
#widgets

The easiest way to add a badge to an IconButton is to use the Badge widget. Use this to show a numeric value or a custom label next to an icon.

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.

Use DecoratedBox to add Rounded Borders to a Widget in Flutter

Use DecoratedBox to add Rounded Borders to a Widget in Flutter

#dart
#flutter
#widgets

In Flutter you can use DecoratedBox to set a lot of decoration/styling options to your widgets. Here's how.

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.

How to style an ElevatedButton in Flutter

How to style an ElevatedButton in Flutter

#dart
#flutter
#widgets

How to style an ElevatedButton in Flutter, including reusing the same style across all buttons with ThemeData.

Browse all tags