【flutter】篇8-2：Animations

官方文档
animations分为两种，
一种是code-based,关注的是widget，分为explicit animation和implicit animation
还有一种是drawing-based

implicit animations【1】

官方文档

import 'package:flutter/material.dart';

const owlUrl =
    'https://raw.githubusercontent.com/flutter/website/master/src/images/owl.jpg';

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

  @override
  State<FadeInDemo> createState() => _FadeInDemoState();
}

class _FadeInDemoState extends State<FadeInDemo> {
  double opacity = 0.0;
  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
      Image.network(owlUrl),
      Expanded(
        child: Directionality(
            textDirection: TextDirection.ltr,
            child:TextButton(
                child: const Text(
                  'Show Details',
                  textDirection: TextDirection.ltr,
                  style: TextStyle(color: Colors.blueAccent),
                ),
                onPressed: () => setState(() {
                  opacity = 1;
                }))
      ),
      ),
      AnimatedOpacity(
        duration: const Duration(seconds: 2),
        opacity: opacity,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: const [
            Text('Type: Owl',textDirection: TextDirection.ltr,),
            Text('Age: 39',textDirection: TextDirection.ltr),
            Text('Employment: None',textDirection: TextDirection.ltr),
          ],
        ),
      )
    ]);
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: FadeInDemo(),
        ),
      ),
    );
  }
}

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

【报错】
flutter A RenderFlex overflowed by 200 pixels on the bottom
【原因】
在高度不确定的组件中使用了高度不确定的组件
【解决】
用expanded来包裹解决
2.
【报错】
No Directionality widget found
【原因】
没有指定文本的方向，但是我加了之后还是不行，查到了这篇博客
【解决】
用Directionality()包裹

implicit animations【2】

Shape-shifting effect

import 'dart:math';

import 'package:flutter/material.dart';

double randomBorderRadius() {
  return Random().nextDouble() * 64;//[0-64.0]
}

double randomMargin() {
  return Random().nextDouble() * 64;
}
double randomSize(){
  return Random().nextDouble()*100 + 50.0;
}

Color randomColor() {
  return Color(0xFFFFFFFF & Random().nextInt(0xFFFFFFFF));
}

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

  @override
  State<AnimatedContainerDemo> createState() => _AnimatedContainerDemoState();
}

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
  late Color color;
  late double borderRadius;
  late double margin;
  late double height;
  late double width;
  @override
  initState() {
    super.initState();
    color = randomColor();
    borderRadius = randomBorderRadius();
    margin = randomMargin();
    height = randomSize();
    width = randomSize();
  }

  @override
  Widget build(BuildContext context) {
    const _duration = Duration(seconds: 2);
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            SizedBox(
              width: 100,
              height: 150,
              child: AnimatedContainer(
                margin: EdgeInsets.all(margin),
                decoration: BoxDecoration(
                  color: color,
                  borderRadius: BorderRadius.circular(borderRadius),
                ), duration: _duration,
                curve: Curves.easeInOutBack,//改变变换的速率
              ),
            ),
            ElevatedButton(
              child: const Text('change'),
              onPressed: () => setState(() {
                color = randomColor();
                borderRadius = randomBorderRadius();
                margin = randomMargin();
                // width = randomSize();
                // height = randomSize();
              }),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: AnimatedContainerDemo(),
    );
  }
}

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

完好的跳转demo

import 'package:flutter/material.dart';
import 'package:flutter_hw/EmbeddH5.dart';
import 'package:flutter_hw/EmbeddH5OfficeDemo.dart';
import 'package:flutter_hw/animation1.dart';
import 'package:flutter_hw/animation2.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
class myPageChange extends StatelessWidget {
  const myPageChange({Key? key}) : super(key: key);

  Directionality buildPage(String titleText,Widget page,BuildContext context){
    return Directionality(
      textDirection: TextDirection.ltr,
      child: ElevatedButton(
          onPressed: (){
            Navigator.push(context, MaterialPageRoute<void>(
              builder: (BuildContext context) {
                return Scaffold(
                    appBar: AppBar(title: Text(titleText)),
                    body: page
                );
              },
            ));
          },
          child: Text(
            textDirection: TextDirection.ltr,
            titleText,
          )
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              buildPage('baidu',EmbeddH5('https://www.baidu.com'), context),
              buildPage('animation2',AnimatedContainerDemo(), context),

              /**webView测试
              ElevatedButton(
                  onPressed: ()=>{
                    WebView("https://www.baidu.com",context)
                  },
                  child: Text('test',textDirection: TextDirection.ltr,))
               */
            ],
          ),
        ),
      );
  }
}

调用：

runApp(MaterialApp(home:myPageChange()));

还是官方的API文档中的demo给力