第三个app：做一个支持点击交互的列表页

// 做一个列表页
import 'package:flutter/material.dart';
import 'package:yunote/module/toast.dart';
import 'package:english_words/english_words.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title:"我的第三个App",
      theme: ThemeData(
        primaryColor:Colors.blue
      ),
      home: MyHomePage(title:"列表展示")
    );
  }
}


void _addOverlay(BuildContext context, String info) async {
  //获取OverlayState
  OverlayState overlayState = Overlay.of(context);
  //创建OverlayEntry
  OverlayEntry _overlayEntry = OverlayEntry(
      builder: (BuildContext context) => Positioned(
            top: MediaQuery.of(context).size.height * 2 / 3,
            child: new Container(
              margin: EdgeInsets.all(20),
              padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
              decoration: new BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(4)),
                color: Color(0xFF6666666)
              ),
              child: Text(info, style: TextStyle(color: Colors.white, fontSize: 14.0,decoration: null))
            )
          ));
  //显示到屏幕上。
  overlayState.insert(_overlayEntry);
  //等待2秒
  await Future.delayed(Duration(seconds: 2));
  //移除
  _overlayEntry.remove();
}


class MyHomePage extends StatefulWidget {

  final String title;
  MyHomePage({Key key,this.title}): super(key:key);

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


List<Widget> makeList(BuildContext context) {
  List<Widget> result = List();
  for(int i=0;i<100;i++){
    String data = new WordPair.random().asPascalCase;
    result.insert(i, new GestureDetector(
      onTap:() {
        print("你点击了" + data);
        Toast.toast(context, data);
      },
      child: new Container(
        padding: EdgeInsets.all(20),
        decoration: new BoxDecoration(border: Border(bottom: BorderSide(
          color: const Color(0xFFEEEEEE),
          width: 1,
          style: BorderStyle.solid
        ))),
        child: Text(data)
      )
    ));
  }
  return result;
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    //返回一个列表
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: new Container(
        child: new ListView(
          children: makeList(context)
        ),
      )
    );
  }
}

效果：

image.png

附toast.dart代码:

import 'package:flutter/material.dart';


class Toast {
  static OverlayEntry _overlayEntry; //toast靠它加到屏幕上
  static bool _showing = false; //toast是否正在showing
  static DateTime _startedTime; //开启一个新toast的当前时间，用于对比是否已经展示了足够时间
  static String _msg;
  static void toast(
    BuildContext context,
    String msg,
  ) async {
    assert(msg != null);
    _msg = msg;
    _startedTime = DateTime.now();
    //获取OverlayState
    OverlayState overlayState = Overlay.of(context);
    _showing = true;
    if (_overlayEntry == null) {
      _overlayEntry = OverlayEntry(
          builder: (BuildContext context) => Positioned(
                //top值，可以改变这个值来改变toast在屏幕中的位置
                top: MediaQuery.of(context).size.height * 2 / 3,
                child: Container(
                    alignment: Alignment.center,
                    width: MediaQuery.of(context).size.width,
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 80.0),
                      child: AnimatedOpacity(
                        opacity: _showing ? 1.0 : 0.0, //目标透明度
                        duration: _showing
                            ? Duration(milliseconds: 100)
                            : Duration(milliseconds: 400),
                        child: _buildToastWidget(),
                      ),
                    )),
              ));
      overlayState.insert(_overlayEntry);
    } else {
      //重新绘制UI，类似setState
      _overlayEntry.markNeedsBuild();
    }
    await Future.delayed(Duration(milliseconds: 2000)); //等待两秒

    //2秒后 到底消失不消失
    if (DateTime.now().difference(_startedTime).inMilliseconds >= 2000) {
      _showing = false;
      _overlayEntry.markNeedsBuild();
    }
  }

  //toast绘制
  static _buildToastWidget() {
    return Center(
      child: Card(
        color: Color(0xFF333333),
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
          child: Text(
            _msg,
            style: TextStyle(
              fontSize: 14.0,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}