Flutter Community
Published in

Flutter Community

100+ Flutter & Dart Tips

A Collection of Flutter and Dart Tips and Tricks

Photo by Artur Shamsutdinov on Unsplash

Hello Reader,

I have written this article to list down 100+ tips and tricks that I have tweeted in the last couple of months. If you are new to this Flutter/Dart world, some of these might help you.

1- You can iterate through a map in a null-safe manner using entries.

2- Lists can hold duplicate items. So If you want a collection of unique values, Use a Set instead.

In a Set, two elements cannot be equal, so the code below won’t compile.

3- You can wait for the results of multiple Futures to complete using Future.wait

4- You can use GridView.count to create a grid that’s two tiles wide in portrait mode and three tiles wide in landscape mode

5- You can randomly select an item from a list using Random from dart:math

6- You can use the services library to lock the device orientation

7- You can use the dart:io library to write a platform-specific code

8- You can turn any color to a Material Color

9- You can use the services library to hide the status bar.

10- The http package contains a set of functions and classes to consume HTTP resources. The example below use the http package to make http request.

Follow me on Twitter for more tips about #coding, #learning, #technology… etc.

Check my Apps on Google Play & Apple Store

11- You can use the FadeInImage widget & transparent_image package to display a transparent placeholder waiting for the image to fade in as it gets loaded.

12- To add icons to TextFields use “icon”, “prefixIcon” and “suffixIcon” from InputDecoration

13- The cursor of TextField is Customizable. The example below will set it to purple.

14- To pack the children of a Row close together, set its mainAxisSize to MainAxisSize.min

15- You can size the widgets to fit within a row or column using the Expanded widget.

16- Use the Hero widget to animate a widget from one screen to the next. e.g., an icon on the first page flying to the second page.

17- Use Stack to overlap widgets, The first widget will be the bottommost item, and the last widget will be the topmost item.

18- Use themes to define a set of colors, fonts, shapes, and design styles throughout your app. It’s a way to centralize all your stylistic decisions in one place.

19- Use the constant (kReleaseMode) from (package:flutter/foundation.dart) to execute a code in debug or release mode

20- Use Cascade notation to make a sequence of operations on the same object.

21- You can use the Timer class to execute a piece of code after some time

22- Use the ClipOval widget to clip the child widget in oval or circle shape. If width and height are equal, the shape will be circular. If the width and height are different, then the shape will be oval.

23- Use padLeft and padRight to add character padding on the left and right sides, respectively.

24- Use the List class method join() can to join a List of any type to a String.

25- Set debugShowCheckedModeBanner to false to remove the Debug Banner Tag

26- To get access to the index on an Item in a list, you need to convert the list to a map using the asMap

27- AppBar is the topmost component of the app (or sometimes the bottom-most), the AppBar’s layout contains three components: leading, title, and actions

28- To write any Dart program, be it a script or a Flutter app, you must define a function called main(). It is the entry point of every app.

29- You can change the text color of a button when it’s pressed.

30- The example below is about running a code after dismissing a GetX dialog.

Follow me on Twitter for more tips about #coding, #learning, #technology… etc.

Check my Apps on Google Play & Apple Store

31- Enums and extension methods can make code cleaner to read. In the example below, we are converting Enums to Strings.

32- Dart allows you to create a callable class so you can call the instance of the class as a function

33- You can use InkWell to create a ripple effect to produce a visual experience for touch response.

34- In the example below we are using BoxDecoration & DecorationImage to set a background image an App

35- You can use the ListWheelScrollView widget to build ListView in a scrollable wheel with 3D-effect as if the children are rotating in a wheel.

36- You can have a background color behind a text and add a curve at the start and the end.

37- Use the ready-made widget ‘AboutListTile’ to show an about box displaying extra information about the app like its Version, Privacy policy, Official website, etc.

38- Use FittedBox to scale and fit the child widget inside. It restricts its child widgets from growing their size beyond a specific limit. It re-scales them according to the size available.

39- SafeArea is a padding widget that inserts its child with enough padding to keep it from being blocked by the system status bar, notches, holes, rounded corners, and others.

40- Use MediaQuery to get information about the current device size, its orientation, and user preferences.

41- Mixins allow you to plug in blocks of code without needing to create subclasses.

42- You can pass a function as a parameter to another function.

43- Getters and setters are special methods that provide read and write access to an object’s properties.

44- There are four different ways to append or concatenate Strings

45- You can use the validator widget to validate the Form Inputs in your submit function and apply the validation condition on each TextFormField.

46- Use the ListView to create a horizontal list by setting the scrollDirection parameter to Axis.horizontal

47- Center the FloatingActionButton by setting the floatingActionButtonLocation parameter as below

48- You can provide an action label in SnackBar to act when pressed on it as below

49- Use the barrierDismissible property to prevent dismissing the AlertDialog when the user taps on the screen outside the alert box.

50- You can create a circular icon button using ElevatedButton. Check the following example.

Follow me on Twitter for more tips about #coding, #learning, #technology… etc.

Check my Apps on Google Play & Apple Store

51- You can use the ShaderMask widget to apply a gradient look and feel to its child.

52- AnimatedSize is a widget that automatically transitions its size over a given duration whenever the given child’s size changes.

53- Use the flutter_staggered_grid_view to create a gridview of multiple columns & rows of varying sizes

54- You can use the ColorFiltered widget to apply a color filter to its child widgets

55- Use the flutter_speed_dial plugin to create more than one floating button on the same screen

56- You can create multiple shadows for a Text widget. Check the following example.

Try it on DartPad here

57- LayoutBuilder helps to create a widget tree that can depend on the size of the parent widget.

Try it on DartPad here

58- The wrap is a widget that displays its children in horizontal or vertical runs. It will try to place each child next to the previous child on the main axis. If there is not enough space, it will create a new run adjacent to its existing children in the cross axis.

Try it on DartPad here

59- AnimatedIcon is a Flutter widget that animates the switching of an icon with another.

Try it on DartPad here

60- The AnimatedContainer widget is a container widget with animations. It can be animated by altering the values of its properties.

Try it on DartPad here

61- The SliverAppBar is a widget that gives a floating app bar.

Try it on DartPad here

62- AnimatedOpacity Widget automatically transitions the child’s opacity over a duration whenever the opacity changes.

Try it on DartPad here

63- The SlideTransition Widget animates the position of a widget relative to its normal position.

Try it on DartPad here

64- The FadeTransition Widget fades a widget in and out by animating its opacity.

Try it on DartPad here

65- The AnimatedCrossFade Widget cross-fades between two given children and animates itself between their sizes.

Try it on DartPad here

66- The CupertinoContextMenu Widget is a full-screen modal route that opens when the child is long-pressed.

Try it on DartPad here

67- The BackdropFilter Widget applies a filter to the existing painted content.

Try it on DartPad here

68- The RotatedBox Widget rotates its child by an integral number of quarter turns.

Try it on DartPad here

69- Use the Spacer Widget to create spacing between widgets.

Try it on DartPad here

70- FractionallySizedBox Widget is a widget that sizes its child to a fraction of the total available space.

Try it on DartPad here

Follow me on Twitter for more tips about #coding, #learning, #technology… etc.

Check my Apps on Google Play & Apple Store

71- Use the AnimatedSwitcher widget to create animation when switching between two widgets.

Try it on DartPad here

72- Use the CupertinoAlertDialog to create an iOS-style widget that informs the user about situations that require acknowledgement.

Try it on DartPad here

73- Use CupertinoButton Widget to create an iOS-style button that Takes in a text or an icon that fades out and in on touch.

Try it on DartPad here

74- The CupertinoActionSheet is an ios-themed widget that has action sheets design specifications.

Try it on DartPad here

75- Use GestureDetector to detect gestures like tap, double Tap, press, LongPress, pan, drag, zoom etc.

Try it on DartPad here

76- The AnimatedDefaultTextStyle will transitions the default text style over a given duration whenever the given style changes.

Try it on DartPad here

77- Use Future.delayed() to pause program flow for a certain duration.

Try it on DartPad here

78- Use DecoratedBoxTransition to animates the different properties of DecoratedBox.

Try it on DartPad here

79- Use Divider widget to create a one pixel thick horizontal line, with padding on either side.

Try it on DartPad here

80- Use DropdownButton widget to create a button for selecting from a list of items.

Try it on DartPad here

81- Flow is a widget which arranges its child widgets based on FlowDelegate

Try it on DartPad here

82- You can fix Text Overflow error with Flexible Widget

Try it on DartPad here

83- CheckboxListTile is a widget that combines a checkbox and a list tile. It allows you to create a checkbox along with the title, subtitle, and icon.

Try it on DartPad here

84- LinearProgressIndicator widget is a material design linear progress indicator.

Try it on DartPad here

85- PageView is a scrollable list that works page by page.

Try it on DartPad here

86- PhysicalModel widget allows you to add custom shadow effects and customize its color and shape

Try it on DartPad here

87- RadioListTile widget is a radio button with a label.

Try it on DartPad here

88- RangeSlider widget is used to select a range from a range of values.

Try it on DartPad here

89- RefreshIndicator is a widget that supports Material’s swipe-to-refresh.

Try it on DartPad here

90- Switch widget is used to toggle the on/off state of a single setting.

Try it on DartPad here

Follow me on Twitter for more tips about #coding, #learning, #technology… etc.

Check my Apps on Google Play & Apple Store

91- Tooltip widget helps explain the function of a button or other user interface action.

Try it on DartPad here

92- SelectableText Widget allows the user to Select/Copy the content on the UI.

Try it on DartPad here

93- Transform is a widget that applies a transformation before painting its child.

Try it on DartPad here

94- VerticalDivider widget is a one device pixel thick vertical line, with padding on either side.

Try it on DartPad here

95- TimePicker widget shows a dialog containing a material design time picker.

Try it on DartPad here

96- Stepper widget displays progress through a sequence of steps.

Try it on DartPad here

97- ActionChip widget used to create compact elements called chips, which trigger an action when the user presses on it.

Try it on DartPad here

98- ExpansionPanel widget is a panel with a header and a body and can be either expanded or collapsed. The body of the panel is only visible when it is expanded.

Try it on DartPad here

99- LongPressDraggable Widget is used to create a widget that can be dragged starting from LongPress.

Try it on DartPad here

100- Baseline is a widget that positions its child according to the child’s baseline.

Try it on DartPad here

101- Banner widget displays a diagonal message above the corner of another widget.

Try it on DartPad here

102- BottomNavigationBar is a widget that’s displayed at the bottom of an app for selecting among a small number of views, typically between three and five.

Try it on DartPad here

103- IntrinsicWidth is a widget that sizes its child to the child’s maximum intrinsic width.

Try it on DartPad here

104- IntrinsicHeight Widget is a widget that sizes its child to the child’s intrinsic height.

Try it on DartPad here

Thank you. 👋🏻

Follow me on Twitter for more tips about #coding, #learning, #technology… etc.

Check my Apps on Google Play & Apple Store

Follow Flutter Community on Twitter: https://www.twitter.com/FlutterComm

--

--

--

Articles and Stories from the Flutter Community

Recommended from Medium

day 9 of my #1000daysofcoding

Life beyond the cargo cult

Compiling a simple boot image for x86

Bringing back to modern life - Tonic Trouble

9 things your intranet must do

Ionic vs Flutter: A useful guide to app creators!

SURGERY FROM STARK UPDATING : DEFINITION _ VOLUME ONE — PART. SIXTEEN

#VefamNL Slack AMA with Safe Haven. We asked Logino, and he answered. (part2)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mo Malaka

Mo Malaka

Solutions Architect @aws-amplify | Lifelong Learner | Opinions are my own

More from Medium

@roaakdm: Flutter Tips & Widgets

Daria’s Flutter diaries #3

Using themes in Flutter

Use themes in Flutter

A Better Flutter App #6