flutter 实用效果整理

本文链接： https://blog.csdn.net/weixin_30512027/article/details/88414037

1、返回pop监听

使用WillPopScope组件，它会检测到子组件的Navigation的pop事件，并拦截下来。

2、水波纹效果

先用theme把我们的底部导航栏组件包裹起来，

然后里面有个data，也就是数据，我们就设置个themeData（主题颜色），

然后使用局部theme强制设置splash color和highlight color为透明色，

          brightness: Brightness.light,
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,

3、 弹出widget覆盖原界面

void showOverlay(context) async {
    OverlayState overlayState = Overlay.of(context);
    OverlayEntry overlayEntry = OverlayEntry(builder: (context) {
      return Center(
        child: Container(
          height: 500.0,
          width: 300.0,
          child: Image.network(
            'https://s9.rr.itc.cn/r/wapChange/20164_19_11/a26nda287933407855.jpg',
            fit: BoxFit.cover,
          ),
        ),
      );
    });
    overlayState.insert(overlayEntry);
    await Future.delayed(
      Duration(seconds: 5),
    );
    overlayEntry.remove();
  }
}

4、App进入介绍

用的组件：IntroViewsFlutter
页面组件：PageViewModel
依赖：intro_views_flutter: ^2.3.0

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '开场介绍',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Builder(
        builder: (context) => IntroViewsFlutter(
              pages,
              onTapDoneButton: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => NewPage(),
                  ),
                );
              },
              showSkipButton: true,
              skipText: Text('跳过'),
              doneText: Text('完成'),
              pageButtonTextStyles: TextStyle(
                fontSize: 18.0,
                color: Colors.white,
              ),
            ),
      ),
    );
  }

5、可拖动排序的listview

ReorderableListView

原文链接：http://www.flutterj.com/?post=79#toc-05

flutter 实用效果整理

猜你喜欢