Flutter Tutorial – Learn Flutter

Flutter Tutorial

Welcome to Flutter Tutorial!

Flutter is a cross-platform application development framework by Google.

Basic Widgets

You build your application’s UI using widgets. Flutter provides a wide range of widgets. We shall go through each one of them with immediate code snippets and well illustrated examples.

We may not go through each of the properties or methods of widgets at once, which could be overwhelming, but we shall introduce you to them as and when required based on necessity.

AlertDialog

• Flutter AlertDialog Example
• Flutter AlertDialog – Rounded Corners
• Flutter AlertDialog – Do not Close on Tapping outside Alert Dialog
• Flutter AlertDialog – Elevation
• Flutter AlertDialog – Background Color

AppBar

• Flutter AppBar – Center Align Title
• Flutter AppBar – Text Color
• Flutter AppBar – Background Color

Canvas

• Flutter Canvas – Draw Arc
• Flutter Canvas – Draw Points
• Flutter Canvas – Draw Rectangle
• Flutter Canvas – Draw Circle

Checkbox

• Flutter Checkbox Example

Column

• Flutter Column Example
• Flutter Column – Center Horizontally
• Flutter Column – Center Vertically

Container

• Flutter Container – Border Color & Width
• Flutter Container – Border only on Left, Right, Top or Bottom
• Flutter Container – Color
• Flutter Container – Height
• Flutter Container – Margin
• Flutter Container – Padding
• Flutter Container – Width

ElevatedButton

Flutter ElevatedButton Example

Actions

• Flutter ElevatedButton – onPressed
• Flutter ElevatedButton – onLongPress

Style

• Flutter ElevatedButton – Background Color
• Flutter ElevatedButton – Border
• Flutter ElevatedButton – Elevation
• Flutter ElevatedButton – Font Size
• Flutter ElevatedButton – Padding
• Flutter ElevatedButton – On Primary (Foreground) Color
• Flutter ElevatedButton – Shadow Color

FloatingActionButton

• Flutter FloatingActionButton – Center Float
• Flutter FloatingActionButton – Background Color
• Flutter FloatingActionButton – Custom Shape
• Flutter FloatingActionButton – Diamond Shape
• Flutter FloatingActionButton – mini button
• Flutter FloatingActionButton – Rectangle/Square Shape
• Flutter FloatingActionButton – Rounded Rectangle Shape
• Flutter FloatingActionButton – Switch Icons onPressed
• Flutter FloatingActionButton extended – Icon With Label
• Flutter FloatingActionButton – onPressed

Icon

• Flutter Icon Example
• Flutter Icon – Color
• Flutter Icon – Size

Image

• Flutter – Display Image from URL
• Flutter – Image with Round Corners
• Flutter – Padding around Image
• Flutter – Image with Border
• Flutter – Round Image

ListView

• Flutter ListView Example
• Flutter ListView – Scroll Horizontally
• Flutter ListView – Disable Scroll
• Flutter ListView – Limit Height
• Flutter ListView – Build ListView from List of items
• Flutter ListView – Add Item to ListView dynamically

Radio

• Flutter Radio Example

RadioListTile

• Flutter RadioListTile Example

RaisedButton (Depreciated)

Flutter RaisedButton Example

• Flutter RaisedButton – onPressed()
• Flutter RaisedButton – onLongPress()
• Flutter RaisedButton – Font Size
• Flutter RaisedButton – Padding
• Flutter RaisedButton – Radial Gradient Background Color
• Flutter RaisedButton – Linear Gradient Background Color

Row

Row widget lets you create a flexible layout in horizontal direction.

• Flutter Row Example
• Flutter Row – Expanded Children

SelectableText

• Flutter SelectableText Example

Slider

• Flutter Slider Example

SnackBar

• Flutter SnackBar Example
• Flutter SnackBar – Action
• Flutter SnackBar – Duration
• Flutter SnackBar – Background Color

Switch

• Flutter Switch Example

Text

Text widget lets you create a piece of text in your application.

• Flutter Text – Color
• Flutter Text – Font Family
• Flutter Text – Underline
• Flutter Text – Programmatically change Font Size

TextField

• Flutter TextField Example
• Flutter TextField – Password
• Flutter TextField – Get Value entered in TextField
• Flutter TextField – Cursor Color

Cupertino Widgets

CupertinoActivityIndicator

• Flutter CupertinoActivityIndicator
• Flutter CupertinoActivityIndicator – Radius

CupertinoButton

• Flutter CupertinoButton
• Flutter CupertinoButton – Background Color
• Flutter CupertinoButton – Border Radius
• Flutter CupertinoButton – Disabled Button
• Flutter CupertinoButton – Disabled Color
• Flutter CupertinoButton – onPressed
• Flutter CupertinoButton – Padding

CupertinoActionSheet

• Flutter CupertinoActionSheet
• Flutter CupertinoActivityIndicator – Radius
• Flutter CupertinoActivityIndicator – Progress

Other Flutter Tutorials

• Remove or Hide DEBUG Banner

Example Flutter Applications

• Flutter Barcode Scanner

Summary

This is a complete collection of Flutter Tutorials. Hope, the examples provided here will help you Learn Flutter with ease.