Create A Simple Register Form With Flutter Using Android

admin_img Posted By Bajarangi soft , Posted On 23-09-2020

In a typical setting, you’ll need to use a combination of horizontal and vertical layouts to create each field of the page. It sometimes becomes hard to create consistency between each field’s layout on the same page and it gets bit tricky to keep the consistency across different pages.

Learn Create a Beautiful Simple Form With Flutter Android App

While exploring Flutter widgets, I stumbled upon ListTile and since then I’m sold on it.
YOu can Add Beautiful Form With Flutter Code:

Scaffold(
  appBar: new AppBar(
    centerTitle: true,
    leading:IconButton(icon: const Icon(Icons.menu), onPressed: () {}),
    title: new Text('New Contacts'),
    backgroundColor: Colors.indigo,
    actions: <Widget>[
      new IconButton(icon: const Icon(Icons.save), onPressed: () {})
    ],
  ),
  body: new Column(
    children: <Widget>[
      SizedBox(height: 10.0),
      new ListTile(
        leading: const Icon(Icons.person,color: Colors.indigo,),
        title: new TextField(
          decoration: new InputDecoration(
            hintText: "Name",
          ),
        ),
      ),
      new ListTile(
        leading: const Icon(Icons.phone,color: Colors.indigo),
        title: new TextField(
          decoration: new InputDecoration(
            hintText: "Phone",
          ),
        ),
      ),
      new ListTile(
        leading: const Icon(Icons.email,color: Colors.indigo),
        title: new TextField(
          decoration: new InputDecoration(
            hintText: "Email",
          ),
        ),
      ),
      new ListTile(
        leading: const Icon(Icons.lock,color: Colors.indigo),
        title: new TextField(
          decoration: new InputDecoration(
            hintText: "Password",
          ),
        ),
      ),
      new ListTile(
        leading: const Icon(Icons.lock,color: Colors.indigo),
        title: new TextField(
          decoration: new InputDecoration(
            hintText: "Confirm Password",
          ),
        ),
      ),
      const Divider(
        height: 1.0,
      ),
      new ListTile(
        leading: const Icon(Icons.label,color: Colors.indigo),
        title: const Text('Nick'),
        subtitle: const Text('None'),
      ),
      new ListTile(
        leading: const Icon(Icons.today,color: Colors.indigo),
        title: const Text('Birthday'),
        subtitle: const Text('February 20, 1980'),
      ),
      new ListTile(
        leading: const Icon(Icons.group,color: Colors.indigo),
        title: const Text('Contact group'),
        subtitle: const Text('Not specified'),
      )
    ],
  ),
);


Compete Code FOr Beautiful Form With Flutter In Flutter
main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  //

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {

      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: new AppBar(
        centerTitle: true,
        leading:IconButton(icon: const Icon(Icons.menu), onPressed: () {}),
        title: new Text('New Contacts'),
        backgroundColor: Colors.indigo,
        actions: <Widget>[
          new IconButton(icon: const Icon(Icons.save), onPressed: () {})
        ],
      ),
      body: new Column(
        children: <Widget>[
          SizedBox(height: 10.0),
          new ListTile(
            leading: const Icon(Icons.person,color: Colors.indigo,),
            title: new TextField(
              decoration: new InputDecoration(
                hintText: "Name",
              ),
            ),
          ),
          new ListTile(
            leading: const Icon(Icons.phone,color: Colors.indigo),
            title: new TextField(
              decoration: new InputDecoration(
                hintText: "Phone",
              ),
            ),
          ),
          new ListTile(
            leading: const Icon(Icons.email,color: Colors.indigo),
            title: new TextField(
              decoration: new InputDecoration(
                hintText: "Email",
              ),
            ),
          ),
          new ListTile(
            leading: const Icon(Icons.lock,color: Colors.indigo),
            title: new TextField(
              decoration: new InputDecoration(
                hintText: "Password",
              ),
            ),
          ),
          new ListTile(
            leading: const Icon(Icons.lock,color: Colors.indigo),
            title: new TextField(
              decoration: new InputDecoration(
                hintText: "Confirm Password",
              ),
            ),
          ),
          const Divider(
            height: 1.0,
          ),
          new ListTile(
            leading: const Icon(Icons.label,color: Colors.indigo),
            title: const Text('Nick'),
            subtitle: const Text('None'),
          ),
          new ListTile(
            leading: const Icon(Icons.today,color: Colors.indigo),
            title: const Text('Birthday'),
            subtitle: const Text('February 20, 1980'),
          ),
          new ListTile(
            leading: const Icon(Icons.group,color: Colors.indigo),
            title: const Text('Contact group'),
            subtitle: const Text('Not specified'),
          )
        ],
      ),
    );

  }
}

 

Related Post