Flutter 路由学习

1: MaterialApp 内节点增加routes:{

key:(BuildContext context)=>StateFulWidget(),

key:(BuildContext context)=>StateFulWidget(),

} 

ps:这里不能用StateLessWidget,不然点击返回 ，存在一个黑屏页面，本身StateFulWidget 已经是一层了.

2: 事件，例如 onTap 函数内启动路由跳转
 

路由名跳转:
 

Navigator.pushNamed(context, routeName)

路由跳转:
 

Navigator.push(
    context, MaterialPageRoute(builder: (context) => page))

完整代码如下:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'Gesture.dart';
import 'StateFul.dart';
import 'flutter_layout.dart';

main() => runApp(Record());

class Record extends StatelessWidget {
  const Record({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "回顾总结",
      home: RecordPage(),
      routes: {
        "gesture": (BuildContext con) => GestruePage(),
        "ful2": (BuildContext con) => FulPage2(),
        "ful": (BuildContext con) => FulPage(),
      },
    );
  }
}

class RecordPage extends StatefulWidget {
  const RecordPage({Key key}) : super(key: key);

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

class _RecordPageState extends State<RecordPage> {
  bool isRouterNameStart = true;
  double m_X = 0;
  double m_y = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("路由首页"),
        centerTitle: true,
        leading: GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: Image(
            image: AssetImage("images/me_record.jpeg"),
          ),
        ),
      ),
      body: Column(
        children: [
          SwitchListTile(
              value: isRouterNameStart,
              onChanged: (s) {
                setState(() {
                  isRouterNameStart = s;
                });
              }),
          item(context, "手势", GestruePage(), "gesture"),
          item(context, "StateFulWidget学习", FulPage2(), "ful2"),
          item(context, "Ful学习", FulPage(), "ful"),
          Expanded(
              child: FractionallySizedBox(
            widthFactor: 1,
            child: Stack(
              children: [
                GestureDetector(
                  onPanUpdate: (e) {
                    setState(() {
                      m_X += e.delta.dx;
                      m_y += e.delta.dy;
                    });
                  },
                  child: Container(
                    width: 1000,
                    color: Colors.yellow,
                    height: 1000,
                    child: Center(
                      child: Text("描点"),
                    ),
                  ),
                ),
                Positioned(
                    left: m_X,
                    top: m_y,
                    child: Container(
                      width: 40,
                      height: 40,
                      child: PhysicalModel(
                        color: Colors.red,
                        borderRadius: BorderRadius.circular(20),
                        child: Center(
                          child: Text(
                            "移动",
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                      ),
                    ))
              ],
            ),
          ))
        ],
      ),
    );
  }

  Widget item(BuildContext context, String s, page, routeName) =>
      GestureDetector(
        child: RaisedButton(
          child: Text(s),
        ),
        onTap: () {
          isRouterNameStart
              ? Navigator.pushNamed(context, routeName)
              : Navigator.push(
                  context, MaterialPageRoute(builder: (context) => page));
        },
      );
}

 

import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

main() => runApp(Gestrue());

class Gestrue extends StatelessWidget {
  const Gestrue({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "手势学习",
      home: GestruePage(),
      theme: ThemeData(backgroundColor: Colors.blueAccent),
    );
  }
}

class GestruePage extends StatefulWidget {
  const GestruePage({Key key}) : super(key: key);

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

class _GestruePageState extends State<GestruePage> {
  String msg = "man";
  double moveX = 0;
  double moveY = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("手势"),
        leading: GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: Icon(Icons.arrow_back),
        ),
      ),
      body: GestureDetector(
          onTap: () {
            setState(() {
              msg = "点击事件";
              print('$msg');
            });
          },
          onLongPress: () {
            setState(() {
              msg = "长按事件";
              print('$msg');
            });
          },
          onDoubleTap: () {
            setState(() {
              msg = "双按事件";
              print('$msg');
            });
          },
          onTapDown: (e) {
            setState(() {
              msg = "按下事件";
              print('$msg');
            });
          },
          onTapUp: (e) {
            setState(() {
              msg = "松开事件";
              print('$msg');
            });
          },
          onTapCancel: () {
            setState(() {
              msg = "取消事件";
              print('$msg');
            });
          },
          child: Stack(
            children: [

              FractionallySizedBox(
                widthFactor: 1,
                heightFactor: 1,
                child: Container(
                  padding: EdgeInsets.all(100),
                  color: Colors.red,
                  child: GestureDetector(
                    onPanUpdate: (e) {
                      //手势拖动
                      setState(() {
                        moveX += e.delta.dx;
                        moveY += e.delta.dy;
                      });
                    },
                    child: Text(msg),
                  ),
                ),
              ),
              Positioned(
                child: Container(
                  width: 40,
                  height: 40,
                  child: PhysicalModel(
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.green,
                    child: Center(
                      child: Text(
                        "data",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ),
                left: moveX,
                top: moveY,
              ),
            ],
          )),
    );
  }
}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

main() => runApp(new FUlAPP());

class FUlAPP extends StatelessWidget {
  const FUlAPP({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'ful study',
      home: FulPage2(),
    );
  }
}

class FulPage2 extends StatefulWidget {
  const FulPage2({Key key}) : super(key: key);

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

class _FUlAPPState extends State<FulPage2> {
  int currentIndex = 0;
  String msg = "ful 学习 hi~";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('FUl'),
      ),
      body: currentIndex == 0
          ? RefreshIndicator(
              child: ListView(
                children: [
                  Container(
                    child: Column(
                      children: <Widget>[
                        Text("张三"),
                        Text("李四"),
                        Text("王五"),
                        Text("赵六"),
                        Image.network(
                          "https://img4.sycdn.imooc.com/60a1d2510001869810801440-140-140.jpg",
                          width: 200,
                          height: 200,
                        ),
                        TextField(
                          decoration: InputDecoration(
                            hintText: "请输入描述～",
                            hintStyle:
                                TextStyle(color: Colors.grey, fontSize: 16),
                            contentPadding: EdgeInsets.fromLTRB(10, 0, 10, 0),

                          ),
                          style: TextStyle(color: Colors.blue ),
                        )
                      ],
                    ),
                  )
                ],
              ),
              onRefresh: handlerRefresh)
          : Text(msg),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (position) {
          setState(() {
            currentIndex = position;
            msg =
                currentIndex == 0 ? "   ful 学习 hi~ " : "  welcome to list page";
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home, color: Colors.grey),
              title: Text("首页"),
              activeIcon: Icon(Icons.home_outlined, color: Colors.blue)),
          BottomNavigationBarItem(
              icon: Icon(Icons.contact_mail, color: Colors.grey),
              title: Text("我的"),
              activeIcon: Icon(Icons.contact_mail, color: Colors.blue))
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("你好"),
        onPressed: () {
          setState(() {
            msg = currentIndex == 0
                ? " 首页 ful 学习 hi~ "
                : "hi～ welcome to list page";
          });
        },
      ),
    );
  }

  Future<Null> handlerRefresh() async {
    await Future.delayed(Duration(milliseconds: 200));
    return null;
  }
}

 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

main() => runApp(new FUl_APP());

class FUl_APP extends StatelessWidget {
  const FUl_APP({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'ful layout',
      home: FulPage(),
    );
  }
}

class FulPage extends StatefulWidget {
  const FulPage({Key key}) : super(key: key);

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

class _FUlAPPState extends State<FulPage> {
  int currentIndex = 0;
  String msg = "ful 学习 hi~";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        leading: GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: Icon(Icons.arrow_back),
        ),
        centerTitle: true,
        title: Text('FUl'),
      ),
      body: currentIndex == 0
          ? RefreshIndicator(
              child: ListView(
                children: [
                  Container(
                    child: Column(
                      children: <Widget>[
                        Row(
                          children: [
                            ClipOval(
                              child: SizedBox(
                                child: Image.network(
                                  "https://img4.sycdn.imooc.com/60a1d2510001869810801440-140-140.jpg",
                                  width: 200,
                                  height: 200,
                                ),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.all(3),
                              child: ClipRRect(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(10)),
                                child: Opacity(
                                  opacity: 0.3,
                                  child: Image.network(
                                    "https://img4.sycdn.imooc.com/60a1d2510001869810801440-140-140.jpg",
                                    width: 100,
                                    height: 100,
                                  ),
                                ),
                              ),
                            )
                          ],
                        ),
                        Text("张三"),
                        Text("李四"),
                        Text("王五"),
                        Text("赵六"),
                        Container(
                          width: 200,
                          height: 200,
                          color: Colors.blue,
                          alignment: Alignment.center,
                          child: PageView(
                            children: [
                              Image.network(
                                "http://www.devio.org/img/avatar.png",
                              ),
                              Text(
                                "PageView 2",
                                style: TextStyle(),
                              )
                            ],
                          ),
                        ),
                        TextField(
                          decoration: InputDecoration(
                            hintText: "请输入描述～",
                            hintStyle:
                                TextStyle(color: Colors.grey, fontSize: 16),
                            contentPadding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                          ),
                          style: TextStyle(color: Colors.blue),
                        )
                      ],
                    ),
                  )
                ],
              ),
              onRefresh: handlerRefresh)
          : Text(msg),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (position) {
          setState(() {
            currentIndex = position;
            msg =
                currentIndex == 0 ? "   ful 学习 hi~ " : "  welcome to list page";
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home, color: Colors.grey),
              title: Text("首页"),
              activeIcon: Icon(Icons.home_outlined, color: Colors.blue)),
          BottomNavigationBarItem(
              icon: Icon(Icons.contact_mail, color: Colors.grey),
              title: Text("我的"),
              activeIcon: Icon(Icons.contact_mail, color: Colors.blue))
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("你好"),
        onPressed: () {
          setState(() {
            msg = currentIndex == 0
                ? " 首页 ful 学习 hi~ "
                : "hi～ welcome to list page";
          });
        },
      ),
    );
  }

  Future<Null> handlerRefresh() async {
    await Future.delayed(Duration(milliseconds: 200));
    return null;
  }
}