An Introduction to Flutter : It’s All Widgets!

Part-1 : Scrollable Row, Column, Wrap

Aditya Patnaik

Published in

Flutter Community

5 min readSep 12, 2019

You can learn flutter at the drop of a hat. Trust me, it’s easy!

Dig In!

https://flutter.dev/docs/get-started/install

For starters, here’s your First App.

Why Flutter?

One code base for both iOS and Android.
Flutter is the only mobile SDK that provides reactive views without requiring a JavaScript bridge.
Flutter apps look and feel great.
Make a change in the app and see them in the blink of an eye. All thanks to Hot-Reload.

What’s up with “Dart”!

Dart is a reactive language that talks similar to python in terms of ease of coding while keeping the power of native java under the hood.

Widgets

There are broadly two types of widgets in Flutter.
State-full Widgets and Stateless Widgets. The names are self-explanatory.
State-full Widgets are sensitive to what happens within its boundaries and gets rebuilt when a state change is detected. Conversely, Stateless widgets are not state sensitive and remain static throughout its life cycle.

How to Write a State-full Widget?

How to Write a Stateless Widget?

Container Widget

Containers are widgets that wrap around other child widgets to define their:

Alignment- aligns the child widgets

alignment: Alignment.bottomCenter, // way 1
alignment : Alignment(double x,double y), // way 2
alignment : FractionalOffset(double x, double y) // way 3

Constraints

//Constraints are rules given to a box by the parent widget.BoxConstraints({
//Creates box constraints with the given rules
minWidth: 0.0,
maxWidth: double.infinity,
minHeight: 0.0,
maxHeight: double.infinity
})BoxConstraints.expand({
// Creates box constraints that expand to fill another box constraints.
width:10.0,
height:10.0,
})BoxConstraints.loose(Size size) // Creates box constraints that forbid sizes larger than the given size.

decoration

decoration : BoxDecoration(
    color: const Color(0xff7c94b6),
    foregroundDecoration: BoxDecoration(...), // The decoration to paint in front of the child.
    margin: EdgeInsets.all(double value),
    padding: EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom),
    gradient: LinearGradient(colors), //applies gradient
),

transform- helps to apply transformations to the child widgets.

Transform(
    alignment: Alignment.topRight,
    transform: Matrix4.skewY(0.3)..rotateZ(-math.pi / 12.0),
    child: Container(
      padding: const EdgeInsets.all(8.0),
      color: const Color(0xFFE8581C),
      child: const Text('Hey'),
    ),

Here’s a container in action:

Wrap VS Row, Column

Row Widget

A Row widget arranges its children horizontally.
mainAxisAlignment and crossAxisAlignment properties are used to understand the position of the child widgets.
A Row widget doesn’t scroll. However, to have a scroll-able line of widgets, a ListView can be used. Or the row widget can be wrapped around a SingleChildScrollView Widget with scroll direction set to horizontal.
The Expanded Widget is wrapped around a child so that it can take all the available space in the row. However, the usage of Expanded Widget is optional.
It’s a good practice to specify the child widgets with a Flex factor so that the child gets expanded and fills up the available space as per the flex-priority.
Yellow and black warning stripes may appear if the children of the row are together wider than the row itself.

Here’s a routine row implementation in action.

Column Widget

A Column widget arranges its children vertically.
How the children should be placed is determined by the mainAxisAlignment and crossAxisAlignment properties.
A Column widget behaves like a row widget in every aspect except, a column widget’s mainAxisAlignment is always vertical.

Here’s a simple Column implementation in action.

The Wrap Widget is Hot!

A Wrap Widget is smart! How?
Row + Column = Wrap + ❤️
Rows and Columns cannot exceed its length.
In the case of Wrap widget, if the child widgets cannot fit in the space. It creates a new line adjacent to the children in the cross axis and boom! Automatic change in size! Without any Warning of overflow!
A Wrap widget is a responsive amalgamation of row and column widget.
The direction property determines whether to implement a wrap as a row or a column.

direction: Axis.vertical, // for column implementation
direction: Axis.horizontal, // for row implementation
spacing: 2.0, // gap between children
runSpacing: 2.0 , // gap between lines

Here’s a Wrap Widget in action

Let’s create something with what we have learned so far…

Head on to the Material Color tool to select your favorite theme.

Color Tool - Material Design

Create and share color palettes for your UI, and measure the accessibility of any color combination.

material.io

We are going to create a basic layout using Row and Column Widgets. But this time we’ll dig deep into the details of implementation.

Play with flutter!

Visit the Flutter documentation and read all that you can!

Widget catalog

Create beautiful apps faster with Flutter's collection of visual, structural, platform, and interactive widgets. In…

flutter.dev

Have a look at the Design and try it out yourself!

Take it and make it your own!

Your implementation could be completely different yet exclusive.

main.dart

Sample.dart

If you have reached this far, give yourself a pat on the back!

Share your amazing designs with me on twitter.

Please put a comment down below if you need any assistance regarding Flutter Dev.

Thank You.