void _increment() async {
  await Future.delayed(Duration(seconds: 1));
  setState((){ _counter++; });
}

void _increment() {
  Future.delayed(Duration(seconds: 1),(){
    setState((){ _counter++; });
  });
}

void _increment() {
  Future.delayed(Duration(seconds: 1)).then(
  	(value) => setState((){ _counter++; })
  );
}

void main(){
  Future(() => print('A'));
  print('B');
}
//打印结果：BA

void main(){
  Future.delayed(Duration(seconds: 1),() => print("event 3"));
  Future.delayed(Duration.zero, ()=>print("event 2"));
  Future(()=>print("event 1"));//这里的event 1与event 2等价，调换语句顺序，执行顺序也会对应调换
  
  scheduleMicrotask(()=>print("mtask 1"));
  Future.microtask(()=>print("mtask 2"));
  Future.value(123).then((value)=>print("mtask 3"));	//_completed.then()
  
  print("main 1");
  Future.sync(()=>print("sync 1"));
  print("main 2");
}
/*
	输出结果：
		mtask 1
		mtask 2
		mtask 3
		event 2
		event 1		
		event 3
		main 1
		sync 1
		main 2
*/

Future.delayed(Duration(seconds: 1),() => print("delayed"))
	.then((value){
    scheduleMicrotask(()=>print("micro"));
    print("then");
  }).then((value)=>print("then 2"));
//结果：delayed then then2 micro

getFuture()
  .then((value)=>print(value))
  .catchError((err)=>print(err))
  .whenComplete(()=>print("complete"));

Future<String> getFuture(){
  return Future.error(Exception("wrong"));
}
//wrong complete

body: FutureBuilder(
	future: Future.value(123),
  builder: (context, AsyncSnapshot<dynamic> snapshot){
    //snapshot代表最近的状态：未完成、完成、出错
    if(snapshot.connectionState == ConnectionState.waiting){
      return CircularProgressIndicator();
    }
    else if(snapshot.connectionState == ConnectionState.done){
      if(snapshot.hasError){
        return Text("error");
      } else {
        return Text("${snapshot.data}");	//data和error只有一个有数据
      }
    }
    //none代表前面设置了future: null，不可能发生；而active设计Stream，暂不考虑
   	throw "should not happen";
  }
)
  
//更加可读
body: FutureBuilder(
	future: Future.value(123),
  initialData: 72,	//未完成时snapshot.data = 72
  builder: (context, AsyncSnapshot<dynamic> snapshot){
    if(snapshot.hasError){
      return Icon(Icons.error, size:80);
    } else if(snapshot.hasData){
      return Text("${snapshot.data}");
    } else {
      return CircularProgressIndicator();
    }
  }
)

final future = Future.delayed(Duration(seconds: 1), ()=>42);
final stream = Stream.periodic(Duration(seconds: 1), (_) => 42);

@override
void initialState(){
  future.then(...);
  stream.listen((event){
    print("stream: $event");
  });
  //...
}

body: StreamBuilder(
	stream: stream,
  builder: (context, AsyncSnapshot<dynamic> snapshot) {
    //可以使用switch来判断snapshot.connectionState
    //...
  }
)

final controller = StreamController();

controller.sink.add(72);//添加一个值，数据类型可以混搭
controller.sink.addError("error");//添加错误
controller.stream.listen((event) {  });//处理事件

controller.close();//关闭流

body: StreamBuilder(
	stream: controller.stream,		//监听controller
  builder: (context, AsyncSnapshot<dynamic> snapshot) {
    //可以使用switch来判断snapshot.connectionState
    //...
  }
)

stream: controller.stream.map((event) => event * 2),

stream: controller.stream.where((event) => event is int),

stream: controller.stream.distinct(),

Stream<int> getNumbers() async* {
  while(true){
    await Future.delayed(Duration(seconds: 1));
    yield 1;
  }
}
//StreamBuilder使用该流
StreamBuilder(
	stream: getTime(),
  builder: (...) { ... }
)

StreamBuilder{
  stream: _controller.stream.transform(TallyTransformer()),
  //....
}

//定义自己的TallyTransformer
class TallyTransformer implements StreamTransformer {
  int sum = 0;
  StreamController _controller = StreamController();
  @override
  Stream bind(Stream stream){
    stream.listen((event) {		//我们听源头的这个stream
      sum += event;
      _controller.add(sum);
    });
    return _controller.stream;	//他人听的是这个新的stream
  }
  
  @override
  StreamTransformer<RS, RT> cast<RS, RT>() => 
    StreamTransformer.castFrom(this);	//类型转换
}

body: false ? Text("加载中") : ListView.builder

AppBar(
	title: GestureDetector(
  	onTap: () {
      //_controller.jumpTo(0.0);
      _controller.animatedTo(-20.0, duration: ,curve: );
      //传入负值，出现到顶上再弹回的效果
    }	//跳转
  )
)

void main() {
  runApp(//1.向下Container传递紧约束：屏幕尺寸
    Container(//2.向下Center传递约束，由于自身的w和h无效，因此原封不动地传递
      width: 0.04,//1.来自App的约束使width失效，w=页面宽度
      height: 0.08,//1.来自App的约束使height失效，h=页面高度
      color: Colors.red[200],
      child: Center(//3.向下Container传递松约束，下限设为0
        child: Container(//4.向下FlutterLogo传递紧约束：200<=h,w<=200
          color: Colors.white,
          width: 200,//3.满足Center的约束，w=200
          height: 200,//3.满足Center的约束，h=200
          child: FlutterLogo(
            size: 10//不满足约束条件，失效，size=200
          ),
        ),
      )
    ));
}

LayoutBuilder(builder: (context, constrants) {
  print("constrants: $constrants");
  return FlutterLogo(size: 10);
}),

Container(
  //向下SizedBox传递紧约束：200<=h,w<=200
  width: 200,
  height: 200,
  child: SizedBox(  //收到Container的紧约束
    height: 100,//失效
    width: 100,//失效
    child: FlutterLogo(size: 10), //不满足约束条件，失效，size=200
  )

Container( //向下传递紧约束：h,w=200
  color: Colors.black,
  width: 200,
  height: 500,
  child: Center(//向下传递松约束：0<=h,w<=200
    child: ConstrainedBox(//重新定义约束区间（同样，收到上级约束的限制）
      constraints: const BoxConstraints(
        minWidth: 60,
        maxWidth: double.infinity,//无限大，被上级限制为200
        minHeight: 60,
        maxHeight: 120,
      ),
      child: LayoutBuilder(builder: (context, constraints) {
        print("$constraints");
        //flutter: BoxConstraints(60.0<=w<=120.0, 60.0<=h<=120.0)
        return const FlutterLogo(size: 150);//150被限制回120
      }),
    ),
  ),
),

Container( //向下传递紧约束：h,w=200
  color: Colors.black,
  width: 200,
  height: 500,
  child: Center(//向下传递松约束：0<=h,w<=200
    child: ConstrainedBox(//重新定义约束区间（同样，收到上级约束的限制）
      constraints: const BoxConstraints(
        minWidth: 60,
        maxWidth: double.infinity,//无限大，被上级限制为200
        minHeight: 60,
        maxHeight: 120,
      ).loosen(),	//变为松约束（下限为0）
      child: LayoutBuilder(builder: (context, constraints) {
        print("$constraints");
        //flutter: BoxConstraints(0.0<=w<=120.0, 0.0<=h<=120.0)
        return const FlutterLogo(size: 150);//150被限制回120
      }),
    ),
  ),
),

Container(
  color: Colors.black,
  width: 300,
  height: 300,
  child: Padding(
    padding: const EdgeInsets.all(20.0),
    //上下同时设置20的边框，收缩了Container的紧约束
    child: LayoutBuilder(builder: (context, constraints) {
      print("$constraints");
      //BoxConstraints(w=260.0, h=260.0)，这里仍然是一个紧约束
      return const FlutterLogo(size: 150);//150仍然失效
    }),
  ),
),

Scaffold(
  body: Center(
    child: Container(
      color: Colors.red[200],
      width: 300,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        //主轴环绕留白
        crossAxisAlignment: CrossAxisAlignment.start,
        //交叉轴：从起始处（一般从左到右）
        //某些语言的阅读顺序是从右向左，可以使用Directionality调整
        children: const [
          FlutterLogo(size:150),
          FlutterLogo(size: 50),
          FlutterLogo(size: 150),
        ],)),
  ),
)

Scaffold(
  body: Center(
    child: Container(
      color: Colors.red[200],
      child: Column(
        mainAxisSize: MainAxisSize.min,//设置主轴方向的长度，默认max
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        //交叉轴：拉伸至与父限制一致（类型交叉轴的expanded）
        children: const [
          FlutterLogo(size:50),
          FlutterLogo(size: 50),
          FlutterLogo(size: 50),
        ],)),
  ),
)

Center(
  child: Container(
    color: Colors.red[200],
    child: Column(
      //交叉轴：拉伸至与父限制一致（类型交叉轴的expand）
      children: [
        FlutterLogo(size:50),
        FlutterLogo(size: 50),
        Expanded(child: Container(color: Colors.black)),
        FlutterLogo(size: 50),
      ],)),
),

Center(
  child: Container(
    color: Colors.red[200],
    child: Column(
      //交叉轴：拉伸至与父限制一致（类型交叉轴的expand）
      children: [
        FlutterLogo(size:50),
        Expanded(flex:1, child: Container(color: Colors.green)),
        FlutterLogo(size: 50),
        Expanded(flex:2, child: Container(color: Colors.green)),
        FlutterLogo(size: 50),
      ],)),
)

Expanded(
  child: Container(color: Colors.green)
),
//等价于
Flexible(
  flex:1,
  child: Container(color: Colors.green)
),

Column(
  children: [
    FlutterLogo(size: 50),
    ListView(children: [	//报错！
      for(int i=0;i<10;i++) Text("ListView item $i")
    ]),
    FlutterLogo(size: 50),
  ],
)

Column(
  children: [
    FlutterLogo(size: 50),
    Expanded(	//使用Expanded包裹ListView
      child: ListView(children: [
        for(int i=0;i<100;i++) Text("ListView item $i")
      ]),
    ),
    FlutterLogo(size: 50),
  ],
)

Center(
  child: Container(
    color: Colors.grey, //可以看到Stack本身的大小，受到children的影响
    child: Stack(
      alignment: Alignment(0,0),//等价于Alignment.center
      children: [
        FlutterLogo(size: 100),
        Text("111",style: TextStyle(fontSize: 150)),
        Positioned(
          left: 0,
          top: 0,
          child: Container(color: Colors.red,width: 30,height: 30)
        ),
      ],),
  ),
)

Container(
  color: Colors.grey,
  child: Stack(
    alignment: Alignment(0,0),
    children: [
      Positioned(	//Stack本身的大小与Positioned组件无关！
        left: 0, bottom: 0,
        child: FlutterLogo(size: 300)
      ),
      Text("111",style: TextStyle(fontSize: 150)),
      Positioned(
        left: 0,
        top: 0,
        child: Container(color: Colors.red,width: 30,height: 30)
      ),
    ],),
)

Stack(
  fit: StackFit.expand,
  ...
),

Container(
	constraints: BoxConstraints(
  	minWidth:30,
  ),
  child: Stack(
  	fit: StackFit.passthrough,
    //直接将上级的非紧约束传给children
  )
)

Container(
  color: Colors.grey,
  child: Stack(
    alignment: Alignment(0,0),
    children: [
      Positioned(
        left: 0,	//假如我们既设置了left，又设置了right，会怎么样呢？
        right: 0,
        child: Container(color: Colors.blue, width: 30, height: 30)
        		//答案是：Container本身的w和h将会失效！
      ),
      Text("111",style: TextStyle(fontSize: 150)),
      Positioned(
        left: 0,
        top: 0,
        child: Container(color: Colors.red,width: 30,height: 30)
      ),
    ],),
),

Container(
  color: Colors.grey, //可以看到Stack本身的大小，受到children的影响
  child: Stack(
    clipBehavior: Clip.none,//默认Clip.hardEdge
    //等价于旧版本的overflow: Overflow.visible,
    alignment: Alignment(0,0),//等价于Alignment.center
    children: [
      Positioned(
        left: 0,
        width: 300, //溢出边框啦！
        child: Container(color: Colors.blue, width: 30, height: 30)
      ),
      Text("111",style: TextStyle(fontSize: 150)),
      Positioned(
        left: 0,
        top: 0,
        child: Container(color: Colors.red,width: 30,height: 30)
      ),
    ],),
),

//很繁琐
Container(
  color: Colors.orange,
  width: 200,
  height: 200,
  child: const Padding(
    padding: EdgeInsets.all(24.0),
    child: Align(
      alignment: Alignment.topLeft,
      child: FlutterLogo(),
    ),
  ),
)

//与上面的代码等价
Container(
  color: Colors.orange,
  width: 200,
  height: 200,
  padding: const EdgeInsets.all(24.0),
  alignment: Alignment.topLeft,
  child: const FlutterLogo(),
)

CustomMultiChildLayout(
  delegate: MyDelegate(),
  children: [
    //标记其中的组件，使得MyDelegate中可以找到这些组件
    //LayoutID与Positioned类似，只能在这里使用
    //* 这里的Z-Order由children顺序决定，与MyDelegate无关！
    LayoutId(id: 1, child: FlutterLogo()),
    LayoutId(id: 2, child: FlutterLogo()),
  ],
)

class MyDelegate extends MultiChildLayoutDelegate {
  @override
  void performLayout(Size size) {
    if (hasChild(1)) {
      final size1 = layoutChild(
          1, //1号组件layout，并得到它的size（会想：向下传递限制，向上传递大小）
          BoxConstraints.tight(const Size(100, 100)) //向下传递限制
          );
      positionChild(1, Offset.zero);  //将1号组件放在左上角
    }
    if (hasChild(2)) {
      final size2 = layoutChild(
          2, //2号组件layout，并得到它的size（会想：向下传递限制，向上传递大小）
          BoxConstraints.tight(const Size(200, 200)) //向下传递限制
          );
      positionChild(2, Offset.zero); //将2号组件放在左上角
    }
  }

//返回true表示永远需要重新更新，这个函数用作优化，这里暂不考虑
  @override
  bool shouldRelayout(_) => true;
}

positionChild(2, Offset(0,size1.height)); //将2号组件放在1号组件下面：类似Column

void performLayout(Size size) {
  if (hasChild(1)) {
    final size1 = layoutChild(
      1, //1号组件layout，并得到它的size（会想：向下传递限制，向上传递大小）
      BoxConstraints.loost(size) //向下传递限制
    );
    positionChild(1, Offset.zero);  //将1号组件放在左上角
  }
  if (hasChild(2)) {
    final size2 = layoutChild(
      2, //2号组件layout，并得到它的size（会想：向下传递限制，向上传递大小）
      BoxConstraints.tight(const Size(200, 200)) //向下传递限制
    );
    positionChild(2, Offset.zero); //将2号组件放在左上角
  }
}

Container(
  color: Colors.grey,
  child: MyRenderBox(
    child: const FlutterLogo(size: 200),
  ),
),

class MyRenderBox extends SingleChildRenderObjectWidget {
  MyRenderBox({required Widget child}) : super(child: child);

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderMyRenderBox();
  }
}

class RenderMyRenderBox extends RenderBox with RenderObjectWithChildMixin {
  //渲染pipeline：performLayout、paint、composition
  @override
  void performLayout() {
    //处理布局
    child!.layout(constraints, //也可以自定义紧约束
        parentUsesSize: true); //作为父组件需要使用子组件的size，默认是false
            //优化用：如果不需要，子组件改动时就可以不必继续遍历渲染父组件
    //size = const Size(300, 300);
    size = (child as RenderBox).size;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    //处理绘制
    context.paintChild(child!, offset + Offset(120,120));
    	//FlutterLogo跑到MyRenderBox外面去了！
    //context.canvas.draw** //可以在这里画任意图形！
    //context.pushOpacity		//Opacity原理：使用push增加一个图层（资源耗费多）
  }
}

Container(
  color: Colors.grey,
  child: ShadowBox(
    distance: 20.0,
    child: const Icon(Icons.category, size: 80),
  ),
),

class ShadowBox extends SingleChildRenderObjectWidget {
  final double distance;
  ShadowBox({required Widget child, required this.distance})
      : super(child: child);

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderShadowBox(distance: distance);
  }

  @override
  void updateRenderObject(
      BuildContext context, covariant RenderShadowBox renderObject) {
    //如果不定义这个函数，热重载时会根据key和类型判断元素是否改变，如果没有改变，则继续使用原来的renderObject，distance的值不会改变
    renderObject.distance = distance;
  }
}

/*
	也可以使用 class RenderShadowBox extends RenderProxyBox
	此时，不再performLayout()和paint函数不再必须，只需要写我们需要的那个函数即可
*/
class RenderShadowBox extends RenderBox with RenderObjectWithChildMixin {
  double distance;
  RenderShadowBox({required this.distance});
  @override
  void performLayout() {
    //处理布局
    child!.layout(constraints, parentUsesSize: true);
    size = (child as RenderBox).size;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    context.paintChild(child!, offset);
    //插入一个新的半透明图层
    context.pushOpacity(offset, 127, (context, offset) {
      context.paintChild(child!, offset + Offset(distance, distance));
    });
  }
}

class RenderShadowBox extends RenderProxyBox {
  double distance;
  RenderShadowBox({required this.distance});

  @override
  void paint(PaintingContext context, Offset offset) {
    context.paintChild(child!, offset);
    context.pushOpacity(offset, 127, (context, offset) {
      context.paintChild(child!, offset + Offset(distance, distance));
    });
  }
}

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,    //一行显示4个
          childAspectRatio: 16 / 9  //方块比例
        ),
       itemBuilder: (_, index)=>Container(
         color: Colors.primaries[index%Colors.primaries.length],
       )),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
  maxCrossAxisExtent: 100,    //一个方块最多显示100像素
  childAspectRatio: 16 / 9,  //方块比例
  mainAxisSpacing: 4.0,     //主轴间距
  crossAxisSpacing: 2.0     //副轴间距
)

//这里也可以写成GridView.extent，直接指定maxCrossAxisExtent属性，可惜的是这样就不支持动态懒加载（builder）了

CustomScrollView(		//定义一个视窗
  slivers: [
    SliverList(delegate: SliverChildBuilderDelegate((context, index) {
      return Container(
        height: 200, 
        color: Colors.primaries[index%Colors.primaries.length],
      );
    }))
  ],
)

CustomScrollView(
  slivers: [
    SliverToBoxAdapter(child: FlutterLogo(size:100),),	//加入一个FlutterLogo
    SliverList(
      delegate: SliverChildBuilderDelegate((context, index) {
        //使用SliverChildBuilderDelegate实现动态加载（Builder）
        //delegate: SliverChildListDelegate对应不用Builder的ListView
        return Container(
          height: 200, 
          color: Colors.primaries[index%Colors.primaries.length],
        );
    	}))
  ],
)

CustomScrollView(
  slivers: [
    /* 1. 用SliverToBoxAdapter包裹的普通Widget */
    const SliverToBoxAdapter(child: FlutterLogo(size:100),),
    /* 2. 用SliverGrid表示的GridView */
    SliverGrid(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
      delegate: SliverChildBuilderDelegate((context, index) => Container(
        color: Colors.primaries[index % Colors.primaries.length]
      ), childCount: 6,  //也就是GridView中的itemCount
                                          )
    ),
    /* 3. 用SliverList表示的ListViewer.builder */
    SliverList(
      delegate: SliverChildBuilderDelegate((context, index) {
        return Container(
          height: 200, 
          color: Colors.primaries[index%Colors.primaries.length],
        );
      })),
  ],
)

//自适应的itemExtent
SliverPrototypeExtentList(delegate: delegate, prototypeItem: prototypeItem),

SliverAppBar(
  floating: true, //稍微一向下拉导航条就出现
  snap: true,
  //title: Text("111"),
  pinned: false,//不固定
  expandedHeight: 100,//导航条高度
  stretch: true,//使用更长的拉伸（flexibleSpace）
  flexibleSpace: FlexibleSpaceBar( 
    background: FlutterLogo(size:100),//导航条中的背景
    title: Text("111"),
    //上缩效果
    collapseMode: CollapseMode.parallax,
    //下拉效果
    stretchModes: [
      StretchMode.blurBackground,
      StretchMode.zoomBackground,
      StretchMode.fadeTitle
    ],
  ),
),

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const CustomScrollView(
        slivers: [
      SliverAppBar(
        floating: true, //稍微一向下拉导航条就出现
        snap: true,
        //title: Text("111"),
        pinned: false,//不固定
        expandedHeight: 100,//导航条高度
        stretch: true,//使用更长的拉伸（flexibleSpace）
        flexibleSpace: FlexibleSpaceBar( 
          background: FlutterLogo(size:100),//导航条中的背景
          title: Text("111"),
          //上缩效果
          collapseMode: CollapseMode.parallax,
          //下拉效果
          stretchModes: [
            StretchMode.blurBackground,
            StretchMode.zoomBackground,
            StretchMode.fadeTitle
          ],
        ),
      ),
      SliverToBoxAdapter(child: FlutterLogo(size: 100)),
      SliverToBoxAdapter(child: FlutterLogo(size: 100)),
      SliverToBoxAdapter(child: FlutterLogo(size: 100)),
      SliverFillRemaining(
        child:Center(	//用加载圈填满剩余视口
          child: CircularProgressIndicator(),
        )
      )
        ],
      ),
    );
  }
}

SliverToBoxAdapter(),
//防止SliverPersistentHeader成为最顶层的Sliver，以至于无法上拉刷新
SliverPersistentHeader(
	delegate:
  pinned: true,//像AppBar一样钉在最顶部
)

Ticker _ticker = Ticker((elapsed) {
  print("Tick: $elapsed");	//elapsed是运行总时长
})..start();

double _height = 300;
@override
void initState(){
  Ticker _ticker = Ticker((_) => setState((){
    _height --;
    if(_height <= 0) _height = 300;
  }))..start();
  super.initState();
}

Container(
	constraints: BoxConstraints.expand(),
  //或者
  width: double.infinity,
  height: double.infinity,
)

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);
  @override
  _MyAppState createState() => _MyAppState();
}

//SingleTickerProviderStateMixin用于垂直同步
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  bool _loading = false;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose(); //用完删除，否则内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Center(
          child: Container(
        width: 300,
        height: 120,
        color: Colors.blue,
        child: RotationTransition(
          turns: _controller,   //这里直接使用controller即可，后文来解释
          //这里的动画还没有开始，调用_controller.forward()开始
          child: const Icon(Icons.repeat,size: 100),
        ),
      )),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {		//按一下按钮开始旋转，再按一下停止。
          _loading ? _controller.stop() : _controller.repeat();
          _loading = !_loading;
        },
      ),
    ));
  }
}

class AnimationController extends Animation<double>

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);

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

//SingleTickerProviderStateMixin用于垂直同步，屏幕每次刷新，产生一个tick
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {

  /* class AnimationController extends Animation<double> */
  late AnimationController _controller;
  bool _loading = false;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      lowerBound: 0.0, //与默认一致，生成0-1
      upperBound: 1.0,
      vsync: this,
    )..addListener(() { //dart语法：“..”表示返回值还是前面的表达式
      // _controller.value 在1s内自动生成0～1之间的数字（1秒60帧）
      print("${_controller.value}");
    });

    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose(); //用完删除，否则内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Center(
          child: Container(
        width: 300,
        height: 120,
        color: Colors.blue,
        //例如：RotateTransition、FadeTransition、ScaleTransition
        child: FadeTransition(
          opacity: _controller, //这里本质上要求一个Animation<double>
          child: const Icon(Icons.repeat, size: 100),
        ),
      )),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          _loading ? _controller.stop() : _controller.repeat(reverse: true);
          _loading = !_loading;
        },
      ),
    ));
  }
}

ScaleTransition(
  scale: _controller.drive(Tween(begin: 0.5, end: 1.0)),
  ...
),

SlideTransition(
  position: _controller.drive(Tween(begin: Offset.zero, end: const Offset(0.1,0))),
  ...
),

//等价于
SlideTransition(
  position: Tween(begin: Offset.zero, end: const Offset(0.1,0)).animate(_controller),
  ...
),

SlideTransition(
  position: Tween(begin: Offset.zero, end: const Offset(0,1.0))
      .chain(CurveTween(curve: Curves.elasticOut))  //叠加曲线
      .chain(CurveTween(curve: const Interval(0.5, 1.0))) 
      //使用Interval，限制动画播放时间，从 50% 时间开始到 100% ，其他时间不做任何事
      .animate(_controller),
  ...
),

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late bool _stop = false;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    )..repeat();
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Center(
          child: SlideTransition(
              position: Tween(begin: Offset.zero, end: const Offset(0,1.0))
                .chain(CurveTween(curve: Curves.elasticOut))  //叠加曲线
                .chain(CurveTween(curve: const Interval(0.5, 1.0))) 
                      //使用Interval，限制动画播放时间，从 50% 时间开始到 100% ，其他时间不做任何事
                .animate(_controller),
              child: Container(
                width: 300,
                height: 120,
                color: Colors.blue,
              ))),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          _stop ? _controller.repeat() : _controller.reset();
          _stop = !_stop;
        },
      ),
    ));
  }
}

//如何使用AnimatedBuilder制作出一个FadeTransition？
child: AnimatedBuilder(
  //每当animtion（_controller）的值变化，flutter就会重新调用builder函数
  animation: _controller, 
  //还记得builder就是复杂版的child吗？
  builder: (context, child) {
    return Opacity(
      opacity: _controller.value,//这里可以用Tween制作补间动画
      child: child
    );
  },
  //下面的child是用于优化
  child: const Icon(Icons.repeat, size: 100)
),

//这是内置的FadeTransition，使用起来更加简单，但是没有办法进行细致的绘制优化
child: FadeTransition(
  opacity: _controller, //这里本质上要求一个Animation<double>
  child: const Icon(Icons.repeat, size: 100),
),

import 'package:flutter/material.dart';

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

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

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

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat();
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final Animation opacityAnimation = Tween(begin: 0.5, end: 0.8).animate(_controller);
    return MaterialApp(
        home: Scaffold(
      body: Center(
          child: Container(
              width: 300,
              height: 300,
              color: Colors.red,
              child: AnimatedBuilder(
                  animation: _controller, //每当animtion（_controller）的值变化，flutter就会重新调用builder函数
                  builder: (context, child) { //还记得builder就是复杂版的child吗？
                    return Opacity(
                      opacity: opacityAnimation.value,
                      //使用Tween制作补间
                      //需要注意的是这里的opacity是普通变量，所以需要使用Animation.value
                      child: child
                    );
                  },
                  //下面的child是用于优化
                  child: const Icon(Icons.repeat, size: 100)
              ))),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {},
      ),
    ));
  }
}

import 'package:flutter/material.dart';

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

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

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

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late AnimationController _expansionController;
  late AnimationController _opacityController;

  @override
  void initState() {
    _expansionController = AnimationController(vsync: this);
    _opacityController = AnimationController(vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    _expansionController.dispose();
    _opacityController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final Animation gradientAnimation =
        Tween(begin: 0.3, end: 1.0).animate(_expansionController);
    return MaterialApp(
        home: Scaffold(
      body: Center(
          child: FadeTransition(
              opacity: _opacityController.drive(Tween(begin: 1.0, end: 0.5)),
              child: AnimatedBuilder(
                animation: _expansionController,
                builder: (context, child) => Container(
                  width: 200,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.white,
                    gradient: RadialGradient(colors: [
                      Colors.blue.shade500,
                      Colors.grey.shade50
                    ], stops: [
                      gradientAnimation.value,
                      gradientAnimation.value + 0.2
                    ]),
                  ),
                ),
              ))),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.badge),
        onPressed: () async {
          _expansionController.duration = const Duration(seconds: 3);
          _expansionController.forward();
          await Future.delayed(const Duration(seconds: 3));
          _opacityController.duration = const Duration(seconds: 4);
          _opacityController.forward();
          await Future.delayed(const Duration(seconds: 4));
          _expansionController.duration = const Duration(seconds: 1);
          _expansionController.reverse();
        },
      ),
    ));
  }
}

//原始main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Container(		//一个普普通通的Container
        width: 300,
        height: 300,
        color: Colors.blue,
        child: const Center(
          child: Text("Hi",
              style: TextStyle(
                fontSize: 72,
              )),
        ),
      ),
    ));
  }
}

//使用AnimatedContainer，并传入Duration，两行代码就可以动起来！
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: AnimatedContainer(		//将Container换成AnimatedContainer
            duration: const Duration(seconds: 1),	//同时加上duration参数即可
            width: 300,
            height: 100,
            color: Colors.blue,
            child: const Center(
              child: Text("Hi",style: TextStyle(fontSize: 72)),
            ),
          ),
        ),
      ),
    );
  }
}

AnimatedContainer(
  duration: const Duration(seconds: 1),
  width: 300,
  height: 300,
  //color: Colors.blue,			//设置decoration属性后，color属性必须删除
  decoration: BoxDecoration(
    gradient: const LinearGradient(			//设置渐变色
      begin: Alignment.bottomCenter,    //橙色从底部中心开始
      end: Alignment.topCenter,         //白色从顶部中心开始
      colors: [Colors.orange, Colors.white],
      stops: [0.5,0.7],                 //只在这个区间内设置动画效果
    ),
    boxShadow: const [BoxShadow(spreadRadius: 5, blurRadius: 25)],	//边框半径5，阴影半径25
    borderRadius: BorderRadius.circular(150)  //设置300/2=150，出现正圆形；设置0，变为方形
  ),
  child: const Center(
    child: Text("Hi",style: TextStyle(fontSize: 72)),
  ),
),

AnimatedSwitcher(
  transitionBuilder: (child, animation) {   //自定义动画
    //return FadeTransition(opacity: animation, child: child);  //默认效果：透明度渐变
    //return ScaleTransition(scale: animation, child: child); //缩放动画
    return RotationTransition(turns: animation, child: child); //旋转动画
  },
  duration: const Duration(seconds: 1),	//动画持续1秒
  //child: CircularProgressIndicator(),
  child: Text("h22i",
  	key: UniqueKey(),     //每次都生成一个新的key，因此AnimatedSwitcher每次都会播放切换动画
  	style: const TextStyle(fontSize: 100)
  ),
)

transitionBuilder: (child, animation) {   //自定义动画
  return FadeTransition(   //不透明度渐变 + 旋转动画 的嵌套
    opacity: animation,
    child: RotationTransition(turns: animation, child: child), //旋转动画
  );
},

AnimatedOpacity(
	duration: const Duration(seconds: 1),
	curve: Curves.bounceOut,    //设置回弹曲线
	opacity: 0,
	child: Container(width: 300, height: 300, color: Colors.blue),
),

AnimatedPadding(
  duration: const Duration(seconds: 1),
  padding: const EdgeInsets.only(top: 200.0),
  curve: Curves.bounceOut, //设置回弹曲线，默认Curves.linear
  child: AnimatedOpacity(   //AnimatedPadding中嵌套AnimatedOpacity，但动画会一同开始
    duration: const Duration(seconds: 1),
    opacity: 0.5,
    child: Container(width: 300, height: 300, color: Colors.blue),
  ),
),

//使用TweenAnimationBuilder自制一个AnimatedOpacity

TweenAnimationBuilder(
  duration: const Duration(seconds: 1),
  //其中，begin的值只在开始时有效，后期如果修改了end，则会从当前状态（而不是begin）前往新的end
  //从begin到end期间，builder函数会被反复调用，反复渲染新的（含value）的控件
  tween: Tween<double>(begin: 0.0, end: 0.5),   
  //builder是复杂形式的child（如ListBuilder）
  builder: (BuildContext context, double value, Widget? child)=> Opacity(
    opacity: value,	//value也就是tween自动生成的那个值（0.0-0.5之间）
    child: child  //参数中的child不会被反复渲染，而会使用原来的child，达到一个优化的效果
  ),
  child: Container( 
    //这里的child（也就是直属于TweenAnimationBuilder的child）就是builder函数中的child
    //builder不会反复渲染这里的child，达到一个优化的效果
    width: 300,
    height: 300,
    color: Colors.red,
  ),
),

//旋转变换
TweenAnimationBuilder(
  duration: const Duration(seconds: 1),
  tween: Tween<double>(begin: 1.0, end: 6.0),   //忽略begin，则此时begin=end，启动时动画不播放
  builder: (BuildContext context, double value, Widget? child) => Container(
    width: 300,
    height: 300,
    color: Colors.red,
    // * 任何平移旋转缩放操作都能用4*4矩阵表示
    //Transform( transform: Matrix4.identity().translate(x),
    // * 或者使用 Transform.scale缩放 / .rotate旋转(angle:0-2pi) / .translate平移
    child: Center(child: Transform.rotate(	//旋转
      angle: value, 
      child: const Text("Hi",style: TextStyle(fontSize: 70)),
    ),
   ),
  ),
),

//平移变换
TweenAnimationBuilder(
  duration: const Duration(seconds: 1),
  //tween中可以直接放置offset
  tween: Tween(begin: const Offset(0,0), end: const Offset(40,0)),
  builder: (BuildContext context, Offset value, Widget? child) => Container(
    width: 300,
    height: 300,
    color: Colors.red,
    child: Center(child: Transform.translate(//平移操作
      offset: value,
      child: const Text("Hi",style: TextStyle(fontSize: 70),),
    ),
   ),
  ),
),

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Container(
      width: 300,
      height: 120,
      color: Colors.blue,
      child: const AnimatedCounter(4,duration: Duration(seconds: 1)), //使用滚动计数器
    ))));
  }
}

//滚动计数器
class AnimatedCounter extends StatelessWidget {
  final int number;
  final Duration duration;
  const AnimatedCounter(this.number, {this.duration = const Duration(seconds: 1) ,Key? key})
   : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder(
        duration: duration,
        tween: Tween<double>(end: number.toDouble()), //调整end
        builder: (context, double? value, child) {
          final whole = value! ~/ 1; //整数部分
          final decimal = value - whole;
          return Stack(children: [
            _MyText("$whole", position: -100 * decimal, opacity: 1 - decimal),
            _MyText("${whole + 1}",
                position: 100 - decimal * 100, opacity: decimal),
          ]);
        });
  }
}

class _MyText extends StatelessWidget {
  final String text;
  final double position;
  final double opacity;
  const _MyText(this.text,
      {required this.position, required this.opacity, Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Positioned(
      child: Opacity(
        opacity: opacity,
        child: Text(text, style: const TextStyle(fontSize: 100)),
      ),
      top: position,
    );
  }
}