Login interface design

In the development process of mobile App, almost no App will have a login interface, so we will use fluent to achieve the effect of login interface today.

First of all, we need to master the elements of the login interface, such as user name, password prompt and input box, and then there may be the logo above, the login button below, and the forgotten password display.

When the blogger explained the components, he said that in the development of Flutter, everything is a component. That is to say, you can assign the interface directly to a variable, such as the previous operation, so many return codes can be copied directly to a variable, so it is convenient to insert the operation, so many nested writes, if you lose a bracket, you may find it dead, so Assign variables, and then put them in return. The code will look much simpler.

Login page.dart login page code

Here we write the login page first. The code of login_page.dart is as follows:

import 'package:flutter/material.dart';
import 'home_page.dart';
//Login interface
class LoginPage extends StatefulWidget {

  static String tag = 'login-page';

  @override
  _LoginPageState createState() => new _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    final logo = Hero(//Flying animation
      tag: 'hero',
      child: CircleAvatar(//Circular picture component
        backgroundColor: Colors.transparent,//transparent
        radius: 48.0,//radius
        child: Image.asset("assets/logo.png"),//picture
      ),
    );

    final email = TextFormField(//User name
      keyboardType: TextInputType.emailAddress,
      autofocus: false,//Auto focus or not
      initialValue: 'liyuanjinglyj@163.com',//Class capacity of default input
      decoration: InputDecoration(
          hintText: 'enter one user name',//Prompt content
          contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),//Top, bottom, left and right margin settings
          border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(32.0)//Set fillet size
          )
      ),
    );

    final password = TextFormField(//Password
      autofocus: false,
      initialValue: 'ssssssssssssssssssssss',
      obscureText: true,
      decoration: InputDecoration(
          hintText: 'Please input a password',
          contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
          border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(32.0)
          )
      ),
    );

    final loginButton = Padding(
      padding: EdgeInsets.symmetric(vertical: 16.0),//Add 16 pixels above and below each
      child: Material(
        borderRadius: BorderRadius.circular(30.0),// Circle angle
        shadowColor: Colors.lightBlueAccent.shade100,//Shadow color
        elevation: 5.0,//Floating distance
        child: MaterialButton(
          minWidth: 200.0,
          height: 42.0,
          onPressed: (){
            Navigator.of(context).pushNamed(HomePage.tag);//Click to jump to the interface
          },
          color: Colors.green,//Button color
          child: Text('Sign in', style: TextStyle(color: Colors.white, fontSize: 20.0),),
        ),
      ),
    );

    final forgotLabel = FlatButton(//The button of flattening has been explained by previous bloggers
      child: Text('Forget password?', style: TextStyle(color: Colors.black54, fontSize: 18.0),),
      onPressed: () {},
    );

    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: ListView(//Place all of these components in the ListView
          shrinkWrap: true,//Content adaptation
          padding: EdgeInsets.only(left: 24.0, right: 24.0),//Fill 24 pixel blocks left and right
          children: <Widget>[
            logo,
            SizedBox(height: 48.0,),//Used to set the spacing between two controls
            email,
            SizedBox(height: 8.0,),
            password,
            SizedBox(height: 24.0,),
            loginButton,
            forgotLabel
          ],
        ),
      ),
    );
  }

}

Home page.dart

The above notes are very detailed, and we will not go into details here. Careful readers should see that there is a login button in this code, and click the jump interface, that is, the home page of most apps. Therefore, we need to write a jump interface home_page.dart. The code is as follows:

import 'package:flutter/material.dart';
//Main interface after login
class HomePage extends StatelessWidget{
  static String tag="home_page";

  @override
  Widget build(BuildContext context) {
    final user=Hero(
      tag: "User name",
      child: Padding(
        padding: EdgeInsets.all(20.0),//Fill 20 pixels blank in all directions
        child: CircleAvatar(
          radius: 72.0,
          backgroundColor: Colors.transparent,
          backgroundImage: AssetImage("assets/timg.jpg"),
        ),
      ),
    );

    final welcome=Padding(//Welcome text prompt
      padding: EdgeInsets.all(8.0),
      child: Text(
        'Welcome',
        style: new TextStyle(color: Colors.white, fontSize: 20.0),
      ),
    );

    final info=Padding(//Other text tips
      padding: EdgeInsets.all(8.0),
      child: Text(
        "Login interface is so simple!",
        style: new TextStyle(color: Colors.white, fontSize: 20.0),
      ),
    );

    final body=Container(//Main content of body
      width: MediaQuery.of(context).size.width,//Set to screen width
      padding: EdgeInsets.all(28.0),//Fill up, down, left and right with 28 blank pixels
      decoration: BoxDecoration(//Decorator, the gradient in front of the blogger has been introduced
          gradient: LinearGradient(//Linear gradient
              colors: [
                Colors.green,//blue
                Colors.lightGreenAccent//A greenish yellow color
              ]
          )
      ),
      child: Column(children: <Widget>[//Add all the subspaces defined above
        user, welcome, info,
      ],),
    );

    return Scaffold(
      body: body,
    );
  }

}

Mia.dart program entry code

The above notes are also very detailed. Before introducing the components of linear gradient, I explained them. It should be well understood. Both interfaces have been written. Now it is important to write the App program entry code. The mia.dart code is as follows:

import 'package:flutter/material.dart';
import 'package:login_flutter_app/page/home_page.dart';
import 'package:login_flutter_app/page/login_page.dart';

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

class MyApp extends StatelessWidget {
  //routes needs Map<String, WidgetBuilder>Type parameter, so a constant of this type is defined here. Add the two previous pages to it
  final routes = <String, WidgetBuilder> {
    LoginPage.tag: (context) => LoginPage(),
    HomePage.tag: (context) => HomePage(),
  };

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Sign in Demo',
      debugShowCheckedModeBanner: false,
      theme: new ThemeData(
        primarySwatch: Colors.lightBlue,
      ),
      home: LoginPage(),
      routes: routes,
    );
  }
}

3 Notes

There are several points to note in this Code:

First, do all the games we wrote before have a debug tag in the upper right corner? This is definitely not necessary in practical application, so set the debugShowCheckedModeBanner property to false here, and the debug tag will not be displayed.

Second, we used pop() to jump to the page, and then push(). We defined a route to write all the used pages in it. When we need to use it later, we can jump directly by using the following code:

Navigator.of(context).pushNamed(key);

This is the key value just defined in route routes. This jump is used to enter static routes. The former one belongs to dynamic routes, and both can jump interfaces. It's also convenient for you to understand.

Third, home defines the home page of the first time the App enters the page. You can also set the initialRoute property to achieve the setting of the initial page. If there is no initialRoute property, you will find the '/' or the home property of MaterialApp in the routing table. However, it should be noted that the '/' (key value) in the routing table (that is, the routes variable defined in the above code) and the home attribute of MaterialApp cannot exist at the same time, but they must exist at the same time.

When initialRoute and '/' or the home attribute of MaterialApp exist at the same time, the priority of initialRoute is higher than both. This means that if the page defined by initialRoute is different from the page set by '/' or the home setting of MaterialApp, the user will see the page defined by initialRoute.

When the home attribute of MaterialApp defines the main page, but the initialRoute is not defined, what the user sees is' / 'or the home multiple corresponding pages of MaterialApp.

This is the code of the login interface. The display effect is shown in the first figure of the blog.

Download address of this blog Code: Click to download