Advanced Flutter Forms (part 1)

This guide will take you through the steps on how to build advanced reactive forms in Flutter (Material). Here is a list of what we’re going to do:

• Text fields with different input types (Text, numbers, etc..) (Part 1)
• Drop downs and check boxes (Part 1)
• Local and server validations (Part 1)
• Type heads for local and server auto completing. (Part 2)
• Automatic text field population (Part 2)
• Loading indicators and snack bars once the form is submitted. (Part 2)

We’ll start small and build up on that. I do not want to repeat what’s on the documentation I will explain anything needed for the tutorial here but if you need to look more into something the docs are an incredible source.

Getting things ready

I’ll assume you already have a flutter project created and want to add a form widget. I like to put all my screen widgets in a folder called screens.

Let’ create our form file in lib\screens\payment_form.dart. Let's add a Scaffold with an app bar

import 'package:flutter/material.dart';
class PaymentScreen extends StatelessWidget {
  const PaymentScreen({Key key}) : super(key: key);