flutter 充电气泡

07-21 835阅读

前言:

之前一直看到 有手机充电的时候 有气泡从Type-C 的位置冒泡上来 慢慢上移, 然后和上面的圆圈 会和,感觉还是挺好看的。今天试了下用 Flutter 实现了一版本。大致效果如下,而且气泡 和 气泡直接还可以粘黏

flutter 充电气泡

 实现原理:

大致的布局就是这样的: Stack 包裹住所有的元素,需要位置移动的是 AnimatedBuilder,这里是把他们独立出来,方便随机的时候打散处理。

flutter 充电气泡

代码实现:

  • PageBubble.dart 整个页面 气泡的粘连效果 有点吃性能
    import 'dart:math';
    import 'dart:ui';
    import 'package:flutter/material.dart';
    import 'package:untitled1a/pages/example1/bubble_dot.dart';
    class PageBubble extends StatefulWidget {
      const PageBubble({Key? key}) : super(key: key);
      @override
      State createState() => _PageBubbleState();
    }
    class _PageBubbleState extends State
        with SingleTickerProviderStateMixin {
      late AnimationController _animationController;
      final Random random = Random();
      @override
      void initState() {
        _animationController = AnimationController(
          vsync: this,
          duration: const Duration(milliseconds: 2500),
        );
        _animationController.repeat();
        super.initState();
      }
      @override
      void dispose() {
        _animationController.dispose();
        // TODO: implement dispose
        super.dispose();
      }
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: Text('充电气泡'),
          ),
          body: Align(
            alignment: Alignment(0.0, 1),
            child: Container(
              height: MediaQuery.of(context).size.height / 3 * 2,
              width: 250,
              // color: Colors.blue,
              child: Stack(
                alignment: Alignment.topCenter,
                children: [
                  ...buildAnimatedPositioned(),
                  Padding(
                    padding: const EdgeInsets.only(
                      top: 40,
                      left: 0,
                    ),
                    child: RotationTransition(
                      alignment: Alignment.center,
                      turns: _animationController,
                      child: Container(
                        width: 200,
                        height: 200,
                        decoration: const BoxDecoration(
                          color: Colors.deepPurple,
                          borderRadius: BorderRadius.only(
                            topRight: Radius.circular(70),
                            topLeft: Radius.circular(90),
                            bottomRight: Radius.circular(60),
                            bottomLeft: Radius.circular(80),
                          ),
                        ),
                      ),
                    ),
                  ),
                  //这个效果很有意思 就是有费性能  不需要可以移除掉
                  BackdropFilter(
                    filter: ImageFilter.dilate(radiusX: 3.0, radiusY: 3.0),
                    child: Container(),
                  ),
                  Positioned(
                    left: 35,
                    top: 45,
                    child: Container(
                      width: 180,
                      height: 180,
                      decoration: BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.circular(90),
                      ),
                      child: const Center(
                        child: Text(
                          '89%',
                          style: TextStyle(
                            fontSize: 40,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
      int getRandomNumber(int min, int max) {
        var random = Random();
        return min + random.nextInt(max - min + 1);
      }
      List buildAnimatedPositioned() {
        List _list = [];
        List.generate(
            9,
            (index) => {
                  _list.add(BubbleDot(time: getRandomNumber(2000, 3500))),
                });
        return _list;
      }
    }
    
  • BubbleDot.dart    气泡效果    之所以把气泡单独出来是为了后面的随机打散操作
    import 'dart:math';
    import 'package:flutter/material.dart';
    class BubbleDot extends StatefulWidget {
      final int time;
      const BubbleDot({super.key, required this.time});
      @override
      State createState() => _BubbleDotState();
    }
    class _BubbleDotState extends State
        with SingleTickerProviderStateMixin {
      late AnimationController _animationController;
      late Animation _animation;
      final Random random = Random();
      late double _leftPos = 0;
      late double _dotWidth = 0;
      @override
      void initState() {
        _animationController = AnimationController(
          vsync: this,
          duration: Duration(milliseconds: widget.time),
        );
        _animation = _animationController.drive(
            Tween(begin: getRandomNumber(660, 800).toDouble(), end: 100));
        //_leftPos = random.nextDouble() * 200;
        _leftPos = getRandomNumber(35, 180).toDouble();
        _dotWidth = getRandomNumber(30, 66).toDouble();
        _animationController.addStatusListener(
            (AnimationStatus status) => {print('status  $status')});
        _animationController.repeat();
        // TODO: implement initState
        super.initState();
      }
      @override
      void dispose() {
        // TODO: implement dispose
        _animationController.dispose();
        super.dispose();
      }
      @override
      Widget build(BuildContext context) {
        return AnimatedBuilder(
          animation: _animation,
          builder: (BuildContext context, Widget? child) {
            return Positioned(
              top: _animation.value,
              //top: 240,
              left: _leftPos,
              child: ClipOval(
                child: Container(
                  width: _dotWidth,
                  height: _dotWidth,
                  decoration: BoxDecoration(
                    color: Colors.deepPurple,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.deepPurple.withOpacity(0.5),
                        spreadRadius: 6,
                        blurRadius: 8,
                        offset: Offset(4, 4), // changes position of shadow
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        );
      }
      int getRandomNumber(int min, int max) {
        return min + random.nextInt(max - min + 1);
      }
    }
    
VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]