Flutter 简单的动画案例(早晨黑夜转换)

可以先看效果

 借用了Ui的图片，动画(太阳,月亮,位移)则是自己制作

代码如下:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyApp1(),
      ),
    );
  }
}

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

  @override
  State<MyApp1> createState() => _MyApp1State();
}

bool bool1 = true;

class _MyApp1State extends State<MyApp1> {
  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;//获取屏幕的大小
    return AnimatedContainer(
      width: size.width,//屏幕宽
      height: size.height,//屏幕高
      decoration: BoxDecoration(
          gradient: LinearGradient(//颜色渐变，在之前的博客中提到过
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
            bool1 ? Color(0xFF8B357F) : Color(0xFF364372),//三元表达式
            bool1 ? Color(0xFFCE587D) : Color(0xFF4F5278),
            bool1 ? Color(0xFFFF9486) : Color(0xFF625876),
            bool1 ? Color(0xFFF69B85) : Color(0xFF584964),
          ])),
      duration: Duration(milliseconds: 300),
      child: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: 40,
            ),
            Row(
              children: [
                SizedBox(
                  width: 20,
                ),
                GestureDetector(
                  onTap: () {
                    setState(() {
                      bool1 = !bool1;
                    });
                  },
                  child: Container(
                    width: size.width * 0.8,
                    height: 60,
                    decoration: BoxDecoration(
                      color: Colors.white.withOpacity(.2),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Stack(
                      children: [
                        AnimatedPositioned(//此动画只能使用在Stack中
                          left: bool1 ? size.width * 0 : size.width * 0.4,
                          child: GestureDetector(
                            onTap: () {},
                            child: AnimatedContainer(
                              width: size.width * 0.4,
                              height: 60,
                              decoration: BoxDecoration(
                                color: bool1
                                    ? Colors.white.withOpacity(.6)
                                    : Colors.black.withOpacity(.6),
                                borderRadius: BorderRadius.circular(10),
                              ),
                              duration: Duration(milliseconds: 300),
                            ),
                          ),
                          duration: Duration(milliseconds: 300),
                        ),
                        AnimatedPositioned(
                            top: 20,
                            left: 20,
                            child: GestureDetector(
                              onTap: () {
                                if (bool1 == false) {
                                  setState(() {
                                    bool1 = true;
                                  });
                                }
                              },
                              child: Text(
                                "Morning Login",
                                style: TextStyle(
                                    color: bool1 ? Colors.black : Colors.white,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 18),
                              ),
                            ),
                            duration: Duration(milliseconds: 300)),
                        AnimatedPositioned(
                            top: 20,
                            right: 40,
                            child: GestureDetector(
                              onTap: () {
                                if (bool1 == true) {
                                  setState(() {
                                    bool1 = false;
                                  });
                                }
                              },
                              child: Text(
                                "Night Login",
                                style: TextStyle(
                                    color: bool1 ? Colors.white : Colors.black,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 18),
                              ),
                            ),
                            duration: Duration(milliseconds: 300))
                      ],
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 40,
            ),
            Row(
              children: [
                SizedBox(
                  width: 20,
                ),
                AnimatedDefaultTextStyle(//添加文本的动画效果
                  duration: Duration(milliseconds: 300),
                  style: TextStyle(
                      color: bool1 ? Colors.white : Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 46),
                  child: Text(
                    bool1 ? "Good Morning" : "Good Night",
                  ),
                ),
              ],
            ),
            Row(
              children: [
                SizedBox(
                  width: 20,
                ),
                AnimatedDefaultTextStyle(//添加文本的动画效果
                  duration: Duration(milliseconds: 300),
                  style: TextStyle(
                      color: bool1
                          ? Colors.white.withOpacity(.6)
                          : Colors.black.withOpacity(.6),
                      fontWeight: FontWeight.bold,
                      fontSize: 13),
                  child: Text(
                    "Enter your Informations below",
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 40,
            ),
            Row(
              children: [
                SizedBox(
                  width: 20,
                ),
                AnimatedDefaultTextStyle(//添加文本的动画效果
                  duration: Duration(milliseconds: 300),
                  style: TextStyle(
                      color: bool1
                          ? Colors.white.withOpacity(.3)
                          : Colors.black.withOpacity(.3),
                      fontWeight: FontWeight.bold,
                      fontSize: 13),
                  child: Text(
                    "Emall",
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.black.withOpacity(.1),
                  border: Border.all(
                      color: Colors.black.withOpacity(.1), width: 2)),
              width: size.width * 0.9,
              height: 60,
            ),
            SizedBox(
              height: 40,
            ),
            Row(
              children: [
                SizedBox(
                  width: 20,
                ),
                AnimatedDefaultTextStyle(//添加文本的动画效果
                  duration: Duration(milliseconds: 300),
                  style: TextStyle(
                      color: bool1
                          ? Colors.white.withOpacity(.3)
                          : Colors.black.withOpacity(.3),
                      fontWeight: FontWeight.bold,
                      fontSize: 13),
                  child: Text(
                    "Password",
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.black.withOpacity(.1),
                  border: Border.all(//添加外层边框的颜色粗细
                      color: Colors.black.withOpacity(.1), width: 2)),
              width: size.width * 0.9,
              height: 60,
            ),
            SizedBox(
              height: 50,
            ),
             //制作太阳 月亮，实际上就是使用Container套了很多层而已
            Container(
              width: 420,
              height: 420,
              child: Stack(
                children: [
                  AnimatedPositioned(
                    top: bool1 ? 120 : 10,
                    left: bool1 ? 20 : 20,
                    duration: Duration(milliseconds: 300),
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(300),
                        color: bool1
                            ? Color(0xFFF7D9AA).withOpacity(.2)
                            : Colors.white.withOpacity(.1),
                      ),
                      width: size.width * 0.85,
                      height: size.width * 0.85,
                      child: Center(
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(300),
                            color: bool1
                                ? Color(0xFFF7D9AA).withOpacity(.2)
                                : Colors.white.withOpacity(.1),
                          ),
                          width: size.width * 0.65,
                          height: size.width * 0.65,
                          child: Center(
                            child: Container(
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(300),
                                color: bool1
                                    ? Color(0xFFF7D9AA).withOpacity(.2)
                                    : Colors.white.withOpacity(.1),
                              ),
                              width: size.width * 0.45,
                              height: size.width * 0.45,
                              child: Center(
                                child: Container(
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(300),
                                    color: bool1
                                        ? Color(0xFFF7D9AA)
                                        : Colors.white,
                                  ),
                                  width: size.width * 0.3,
                                  height: size.width * 0.3,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  //下方图片的切换
                  Positioned(
                      bottom: -72,
                      right: bool1 ? -5 : 2,
                      child: Container(
                        width: 420,
                        height: 420,
                        child: Image.asset(
                          bool1
                              ? "assets/images/tree and area.png"
                              : "assets/images/daa.png",//使用三元表达式来完成图片的转换效果
                          fit: BoxFit.cover,
                        ),
                      )),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

如果获取图片？点击图片(放大)后，右键鼠标可以复制图片，或者保存图片，然后就可以获取到图片了.