The login page is slightly more complex than the startup page.

The issues involved are:

1. Page skipping routing function

2. Add delay to the startup page

3. Style layout

Routing functions

When writing the jump page, I found that the launch page was not very good and could have been more elegant, so I refactored it. Save the main.dart file, set the launch page to the launch page, and add a route to main.dart.

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ' ', theme: ThemeData(primarySwatch: colors.cyan,), home: new Launch(),//Launch set to Launch page routes: <String,WidgetBuilder>{//routes add a routing page"/login":(context)=> new Login(),
      },
    );
  }
Copy the code

A flutter page jump consists of a Route and a Navigator.

Time delay

flutter It’s not as simple as Java.

Future.delayed
Copy the code

You can also use timers, and timers don’t introduce hidden problems. An error is reported when the page is closed before future.delayed is executed.

 Timer t = Timer(Duration(seconds: myDuration), () {
  });
Copy the code

Launch code

class Launch extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _LaunchState();
  }
}

class _LaunchState extends State<Launch>{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ' ',
      theme: ThemeData(
        primarySwatch: Colors.cyan,
      ),
      home: new Scaffold(
        backgroundColor: Colors.cyan,
        body: new Center(
          child: new Image(image:AssetImage("images/ic_app.jpg"),width: 100,height: 100,),
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    onDelayed();
  }

  void onDelayed(){
    var duration = new Duration(seconds: 2);
    new Future.delayed(duration,onLogin);
  }

  void onLogin(){
    Navigator.of(context).pushReplacementNamed("/login"); }}Copy the code

## Style layout page consists of two main appBar and body. AppBar mainly includes the title bar, and body is mainly in addition to appBar. Set the return key in appBar

leading:
Copy the code

Such as appBar style

 appBar: new AppBar(
        leading: new Image(
          image: AssetImage("images/back.png"),
          width: 25,
          height: 25,
        ),
         centerTitle: true,
         title: new Text("Login"),),Copy the code

The layout needs to be used both vertically for columns and horizontally for rows

Child: Column(// vertical style children: <Widget>[])Copy the code

margin

 const SizedBox(height:double)
 const SizedBox(width:double)
 const SizedBox(width:double,height: double)
Copy the code

Input box

 TextField(
                autofocus: true,// Whether to automatically get focus decoration: InputDecoration(//TextField display hintText:"Please enter your mobile phone number.",
                  prefixIcon: Icon(Icons.phone)
                ),
             ),
Copy the code

button

RaisedButton(color: colors.blue,// background color textColor: colors.white,// button textColor onPressed: (){},// click event child: Container(Child: new Center(// Text Center child: new Text('confirm',
                    style: TextStyle(fontSize: 15),
                  ),
                ),
                 width: 100,
               ),
             )
Copy the code

Note: The Flutter smells good, but it still needs to be learned and summarized constantly. It is still a little strange to lift the flutter directly without XML layout. The latest Jetpack Compse is also looking for manual lift layout.