FlutterFAQs

Pro and Semi-pro tips for Flutter.

Please contribute if you encounter anything too. Just file a PR!

Widgets

Use a Material behind a InkWell

• If you want the Material Design "ink splash" effect, use the Inkwell, but make sure that you have it as the child of a Material widget.
• If you use a Container instead and try to add a background color, the splash effect will be superseded by the background.
• The ink splash will cooperate with a Material widget's color parameter.

newMaterial(
color:Colors.blue[500], //Ink Splash will properly overlay
child:newInkWell( ... )
);

CircleAvatar will not radially clip its background image.

• CircleAvatar (despite the name) will not actually clip a backgroundImage to a circle: Issue
• The most performant approach is to probably pre-process any avatar image beforehand and clip it to a circle.
• However this is not always possible and brings additional overhead.
• Instead you can create a Container with equal width and height (to ensure that the clipped radial area is a perfect circle) and add a ClipOval widget as the child of that container. Then you can place the image as the child of the ClipOval;

// ClipOval will radially clip based on the parent// If you have a rectangle with different height & width, then you will// get an oval. If you have a square, you will get a circle.newContainer(
width:40.0,
height:40.0,
child:newClipOval(
child:newImage( ... )
)
)

Layout

Use Stack to mimic "Absolute Positioning" in web land

• If you come from a web-dev background and you want to position a widget relative to another widget, the Stack widget is your friend.
• Example:
  • Say you want to add an "annotation icon" to a CircleAvatar:
  • 
  • Create a Stack with the avatar as the first child. The 'z-index' of each stack child will be based on order of appearance in the child list.
  • Because you want to position the icon relative to the avatar, you need to wrap it inside a Positioned widget which will place it relative to the stack. Add that as the next child in the list.

newStack(
children:<Widget>[
newCircleAvatar( ... ),
// This will place the icon at the bottom right hand cornernewPositioned(
right:2.0,
bottom:2.0,
child:newIcon(...)
)
]
);

Use MediaQuery to retrieve the screen size if needed

• Use the BuildContext parameter of a widget's build function as the parameter for MediaQuery.of()

@overrideWidgetbuild(BuildContext context) {
Size screenSize =MediaQuery.of(context).size;
double width = screenSize.width;
double height = screenSize.height;
// ...
}

Testing

Use WidgetTester.pump if you have to test the end results of a user interaction that leads to many animations.

• You will need to "run through" the animations for a single interaction that lead to a sequence of events before something is done.
• An example is testing the effects of a onDismissed callback for a Dismissable widget (think swipe to delete).
• After you use the WidgetTester to swipe the widget, the following events happen before the onDismissed function is called:
  • The slide has to start
  • The slide has to end
  • The widget has to start shrinking vertically
  • The widget has to finish shrinking
  • The widget has to removed from the tree
• And only then does the onDismissed function gets called.
• So make sure to call WidgetTester.pump for each event before testing the completed logic of the callback.

// Simulate the swipeawait tester.fling( ... )
// PUMP IT UP!!!await tester.pump(); // start the slideawait tester.pump(constDuration(seconds:1)); // finish the slide and start shrinking...await tester.pump(); // first frame of shrinking animationawait tester.pump(constDuration(seconds:1)); // finish the shrinking and call the callback...await tester.pump(); // rebuild after the callback removes the entry// Then test logic of completion of swipe// ...

Bonus

A group of flutter devs working together is called a Kaleidoscope

Listen to Hustlin'/Flutterin' by Rick Ross to reduce bug count.

• Listen to Hustlin' by Rick Ross
• Sing along but replace all instances of Hustlin' with Flutterin'
• Expect to see about 30-50% less bugs in your Flutter code
• Repeat and prosper