Flutter学习之整合demo

flutter

前言

这篇文章是把前两篇写的一个一个的小main.dart整合在一个demo里面，以及在整合过程中遇到的问题
demo地址
demo中设计的代码解释请看这里
基础的layout学习
导航的学习

效果图

May-01-2019 18-15-33.gif

问题

1.导航跳转问题

The context used to push or pop routes from the Navigator must be that of a widget that is a flutter: descendant of a Navigator widget

这是因为直接在MaterialApp中push是不行的。
原来的代码

class Myapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,//设置取消右上角的debug标识
      title: 'flutter学习demo',
      theme: ThemeData.light(),
      home:Scaffold(
        appBar: AppBar(
          title: Text('flutter学习demo'),
        ),
        body: ListView(
          children: [
            getLines('基础的layout学习', context: context,ontap: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => MyBasicLayoutScreen(),
                  ));
            }),
             getLines('导航的学习', context: context,ontap: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => MyNavigationPractice(),
                  ));
            }),

            
          ],
        ),
      )
    );
  }
}

后面把跳转的部分单独拎出来

import 'package:flutter/material.dart';
import 'layout/basicsLayout.dart';
import 'navigation/navigationPractice.dart';
import 'utils/utility.dart';
void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'flutter学习demo',
      theme: ThemeData.light(),
      home: MyHomeScreen(),
    ));


class MyHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('flutter学习demo'),
        ),
        body: ListView(
          children: [
            getLines('基础的layout学习', context: context,ontap: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => MyBasicLayoutScreen(),
                  ));
            }),
             getLines('导航的学习', context: context,ontap: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => MyNavigationPractice(),
                  ));
            }),

            
          ],
        ),
    );
  }
}