Directory portal:A Guide to The Quick Start to Flutter

1. Pages in Flutter

As mentioned earlier, everything in Flutter is a Widget, and the page is a Widget.

It’s just a full-screen Widget.

The following Widget can be used as a page:

class SplashPage extends StatelessWidget {
  final splashUrl =
      'other https://raw.githubusercontent.com/chenBingX/img/master/ / u = 343452579826112 51 & FM = 26 & gp = 0. JPG';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    returnStack(alignment: alignment (0, 0.75), children: <Widget>[Container(decoration: BoxDecoration(image: DecorationImage(image: NetworkImage(splashUrl)),), GestureDetector(// Set the click event onTap: Push (Context, MaterialPageRoute(Builder: (_) {return HomePage();
            }));
          },
          child: Container(
              width: 100,
              height: 40,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(6)),
                gradient: LinearGradient(
                  colors: <Color>[Colors.red, Colors.green, Colors.blue],
                ),
              ),
              child: Center(
                  child: Text(
                "Next", style: TextStyle(color: Colors.white, fontSize: 16), ))), ), ], ); }}Copy the code

Application page:

void main() => runApp(MaterialApp(
      title: 'Flutter',
      home: SplashPage(),
    ));
Copy the code

Look at the results:

2. Use Navigator to jump to the page

In Flutter, use the Navigator to jump to the page.

A simple example of a page jump:

Navigator. Push (Context, MaterialPageRoute(Builder: (_) {// Target page, i.e. a Widgetreturn DetailScreen();
Copy the code

If you want to close a page, you can do this:

Navigator.pop(context);
Copy the code

Let’s build another Scaffold style page to see the effect of the jump.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Container(
        color: Colors.white,
        child: Center(
          child: Text('This Home Pahe'),),),); }}Copy the code

Look at the results:

3. Navigate to the page by name

Navigator supports jumping to a specified page by page name.

Of course, you need to register the page first, in routes of the MaterialApp.

MaterialApp(// Set the first page, the start page initialRoute:'/', routes: {// Register a page'/': (context) => FirstScreen(), // register the second page'/second': (context) => SecondScreen(),
  },
);
Copy the code

Now you can jump to a page by the name of the page you just registered, like this:

Navigator.pushNamed(context, '/second');Copy the code

Directory Portals: A Guide to The Quick Start To Flutter

How can I be found?

Portal:CoorChice homepage

Portal:Lot of CoorChice