Android Flutter Examples

Android Flutter Examples

Layouts

Container

Row

MainAxisAlignment

Note: The below example is with CrossAxisAlignment.center

.center.start.end
.spaceEvenly.spaceAround.spaceBetween

CrossAxisAlignment

.center.start.end.stretch

Column

MainAxisAlignment

Note: The below example is with CrossAxisAlignment.center

.center.start.end.spaceEvenly.spaceAround.spaceBetween

CrossAxisAlignment

.center.start.end.stretch

Center

Note: Center wraps any widget to center to its parent widget. (i.e orange is the parent widget)

Align

.topLeft.topCenter.topRight
.centerLeft.center.centerRight
.bottomLeft.bottomCenter.bottomRight

Note: Align wraps any widget based on the Alignment direction to its parent widget. The default alignment for Align is center.

Padding

SizedBox

Note: SizedBox constraints its child widget to match based on specific size of width and height.

Expanded

RowColumn

Flexible

RowColumn

Hint:

  1. To make Flexible behave similar to Expanded, then add fit: FlexFit.tight
  2. By default fit type for Flexible is fit: FlexFit.loose.

ConstrainedBox

ExpandExpand with HeightTightLoose
BoxConstraints.expand()BoxConstraints.expand(height: 100)BoxConstraints.tight(Size(125, 100))BoxConstraints.loose(Size(125, 100))

Stack

AlignmentDirectional.centerStartAlignmentDirectional.centerAlignmentDirectional.centerEnd
AlignmentDirectional.bottomStartAlignmentDirectional.bottomCenterAlignmentDirectional.bottomEnd
AlignmentDirectional.topStartAlignmentDirectional.topCenterAlignmentDirectional.topEnd

Credits: Fore more detailed blog post for this. Please visit https://medium.com/flutter-community/flutter-for-android-developers-how-to-design-framelayout-in-flutter-93a19fc7e7a6

Wrap

Text

Icon

Material

Button

Flat Button

Raised Button

Icon Button

Floating Action Button

(FAB)

NormalMini
——–mini: true

Input Field

TextField

(Text box or Edit Text)

Under Line Style

SimpleIcon
PrefixSuffix
IconPrefixSuffix
InputDecoration(icon: Icon(Icons.account_circle, color: Colors.blue))InputDecoration(prefixIcon: Icon(Icons.account_circle, color: Colors.blue))InputDecoration(suffixIcon: Icon(Icons.account_circle, color: Colors.blue))

Outer Line Style

Note: Icon, Prefix Icon and Suffix Icon are similar to Underline TextField

TextFormField

References:

  1. https://medium.com/@anilcan/forms-in-flutter-6e1364eafdb5
  2. https://codingwithjoe.com/building-forms-with-flutter/

Utilities

Creates Color Utils

An ultimate cheatbook of curated designs
https://github.com/TakeoffAndroid/flutter-examples
56 forks.
364 stars.
2 open issues.
Recent commits:

(Visited 84 times, 1 visits today)

You May Also Like

About the Author: Android Developer

This is Mohammad I am Android Application Developer. I am the founder of Android Tutorial Online blog. I am programming lover and professional blogger from India. I spend most of my time doing programming and helping other programmers. This Android tutorial online blog for learning and share Android code.
My Chatbot
Powered by Replace Me