Flutter学习笔记（一）基础学习

学习Flutter有一段时间了，整理了一下我之前的学习笔记，作为记录，还在不断完学习完善中。

本文都是些入门的基础知识，学习记录贴，大牛勿喷，手动求饶😆。 在Demo中，可以看到 Routes，Localizations，Provider 1.Text, 2.Status, 3.Button, 4.Image, 5.TextField, 6.Stack/Row, 7.ListView, 8.GridView, 9.CustomScrollView 10.NestedScrollView, 11.Dialog, 12.Drawer, 13.Animation, 14.Transition, 15.Date, 16.Dio, 17.ScreenFit, 18.Theme 等相关知识点。

富文本交互

 RichText(
            text: TextSpan(
              style: DefaultTextStyle.of(context).style,
              children: [
                TextSpan(text: "登陆即视为同意", style: TextStyle(fontSize: 20)),
                TextSpan(
                    text: "《服务协议》",
                    style: TextStyle(fontSize: 20, color: Colors.red),
                    recognizer: TapGestureRecognizer() // 属性指定手势交互
                      ..onTap = () {
                        print("Hello World7");
                      }),
              ],
            ),
          );

自定义输入框

Container(
              height: 60,
              width: 250,
              child: TextField(
                decoration: InputDecoration(
                  fillColor: Color(0x30cccccc),
                  filled: true,
                  enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Color(0x00FF0000)),
                    borderRadius: BorderRadius.all(Radius.circular(100)),
                  ),
                  hintText: "请输入邮箱/手机号",
                  focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Color(0x00FF0000)),
                    borderRadius: BorderRadius.all(Radius.circular(100)),
                  ),
                ),
                textAlign: TextAlign.center, //居中
              ),
            );

iOS风格弹窗

class CustomDialog extends StatelessWidget {
  final String title;
  final String content;
  final VoidCallback onSubmit;

  CustomDialog({this.title = "", this.content = "", this.onSubmit});

  @override
  Widget build(BuildContext context) {
    return Dialog(
      backgroundColor: Colors.white,
      elevation: 5,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10))),
      child: Container(
        width: 50,
        child: _buildDialog(context),
      ),
    );
  }

  Widget _buildDialog(context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        _buildBar(context),
        _buildTitle(),
        _buildContent(),
        _buildFooter(context),
      ],
    );
  }

NestedScrollView 可以在其内部嵌套其他滚动视图的滚动视图

  Widget _buildNestedScrollView2() {
    return SafeArea(
      child: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            SliverAppBar(
              expandedHeight: 230.0,
              pinned: false,
              flexibleSpace: Padding(
                padding: EdgeInsets.symmetric(vertical: 0),
                child: PageView(
                  children: [
                    Container(
                      child: Image.asset("assets/images/liu.jpeg",
                          fit: BoxFit.cover),
                    ),
                    Container(
                      child: Image.asset("assets/images/liu.jpeg",
                          fit: BoxFit.cover),
                    ),
                  ],
                ),
              ),
            ),
            SliverPersistentHeader(
              pinned: true,
              delegate: StickyTabBarDelegate(
                child: TabBar(
                  controller: _tabbarController,
                  labelColor: Colors.black,
                  tabs: <Widget>[
                    Tab(text: tabs[0]),
                    Tab(text: tabs[1]),
                  ],
                ),
              ),
            ),
          ];
        },
        body: TabBarView(
          controller: _tabbarController,
          children: [
            HomeListView2(title: tabs[0]),
            HomeListView2(title: tabs[1]),
          ],
        ),
      ),
    );
  }

组合动画

AnimatedBuilder(
          animation: _sizeAnimation,
          builder: (context, child) {
            return Opacity(
              opacity: _opacityAnim.value, //透明度
              child: Transform(
                transform: Matrix4.rotationZ(_rotationAnim.value), //旋转角度
                alignment: Alignment.center,
                child: Container(
                  width: _sizeAnimation.value, //尺寸大小
                  height: _sizeAnimation.value,
                  color: _colorAnimation.value, //颜色
                ),
              ),
            );
          },
        );

I’m not perfect. But I keep trying. 项目地址：flutter_learn