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
70 forks.
424 stars.
3 open issues.
Recent commits:

(Visited 110 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
Android Tutorial Online

Android Tutorial Online