Login Layout In Flutter Example

Flutter Login Layout Example

Developing mobile app is hard, it's even harder when you have to make your app to be run on both Android and iOS, of course  there are plenty of tools or frameworks out there to build multi platform mobile app by just one single code-base, like React Native, Flutter, etc.

Here's a simple login layout to begin your journey learning Flutter UI design:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo2',
      theme: new ThemeData(
          primarySwatch: Colors.blue,
          backgroundColor: Colors.black12
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page2'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

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

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

class _MyHomePageState extends State {
  String buttonText = "Login";

  void subtractNumbers() {
    setState(() {
      buttonText = "You click login!";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:  Center(
          child: SingleChildScrollView(
            child: Column(
              //to make center
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              //children
              children: [
                Padding(
                    padding: EdgeInsets.only(
                      left: 30,
                      right: 30,
                      top: 20,
                    ),
                    child: Image.asset(
                      "assets/flutter.png",
                      width: 90,
                    )
                ),
                Padding(
                    padding: EdgeInsets.only(
                      left: 30,
                      right: 30,
                      top: 20,
                    ),
                    child: TextFormField (
                      decoration: new InputDecoration(
                          hintText: 'Username',
                      ),

                    )
                ),
                Padding(
                    padding: EdgeInsets.only(
                      left: 30,
                      right: 30,
                      top: 20,
                    ),
                    child: TextFormField (
                      decoration: new InputDecoration(
                          hintText: 'Password',
                      ),
                      obscureText: true,
                    )
                ),
                Padding(
                    padding: EdgeInsets.only(
                      left: 30,
                      right: 30,
                      top: 20,
                    ),
                    child: SizedBox(
                        width: double.infinity,
                        child: ButtonTheme(
                          child: RaisedButton(
//                        padding: EdgeInsets.all(20.0),
                            onPressed: subtractNumbers,
                            color: Colors.blue,
                            child: RichText(
                              text: TextSpan(
                                  text: '${buttonText}',
                                  style: TextStyle(
                                    fontSize: 20,
                                  )
                              ) ,
                            ),
                          ),
                          height: 42,
                        )
                    )
                ),
              ],
            ),
          ),
        ),
    );
  }
}

If you see on top of the form, there's assets/flutter.png, you should replace with your own, put the file on assets directory and also on pubspec.yaml add your asset for example:

assets:
    - assets/yourIcon.png

Flutter is not that easy at first, but after you doing really serious developing your app using it, for just less than a week you will begin to know its concept and begin to love it. The key for learning Flutter is you thinking that everything is Widget, even Padding, Center or just Text, its all a widget. So as it is all widget, you can start by adding parameters, you can have a Child widget inside of Widget infinitely.