flutter 充电气泡

媒介：

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

  
  
    实现原理：

  大致的布局就是如许的： Stack 包裹住全部的元素，需要位置移动的是 AnimatedBuilder，这里是把他们独立出来，方便随机的时候打散处置惩罚。
  

    代码实现：

  

• PageBubble.dart 整个页面 气泡的粘连结果 有点吃性能
  1. import 'dart:math';
  2. import 'dart:ui';
  4. import 'package:flutter/material.dart';
  5. import 'package:untitled1a/pages/example1/bubble_dot.dart';
  7. class PageBubble extends StatefulWidget {
  8.   const PageBubble({Key? key}) : super(key: key);
  10.   @override
  11.   State<PageBubble> createState() => _PageBubbleState();
  12. }
  14. class _PageBubbleState extends State<PageBubble>
  15.     with SingleTickerProviderStateMixin {
  16.   late AnimationController _animationController;
  17.   final Random random = Random();
  18.   @override
  19.   void initState() {
  20.     _animationController = AnimationController(
  21.       vsync: this,
  22.       duration: const Duration(milliseconds: 2500),
  23.     );
  24.     _animationController.repeat();
  25.     super.initState();
  26.   }
  28.   @override
  29.   void dispose() {
  30.     _animationController.dispose();
  32.     // TODO: implement dispose
  33.     super.dispose();
  34.   }
  36.   @override
  37.   Widget build(BuildContext context) {
  38.     return Scaffold(
  39.       appBar: AppBar(
  40.         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
  41.         title: Text('充电气泡'),
  42.       ),
  43.       body: Align(
  44.         alignment: Alignment(0.0, 1),
  45.         child: Container(
  46.           height: MediaQuery.of(context).size.height / 3 * 2,
  47.           width: 250,
  48.           // color: Colors.blue,
  49.           child: Stack(
  50.             alignment: Alignment.topCenter,
  51.             children: [
  52.               ...buildAnimatedPositioned(),
  53.               Padding(
  54.                 padding: const EdgeInsets.only(
  55.                   top: 40,
  56.                   left: 0,
  57.                 ),
  58.                 child: RotationTransition(
  59.                   alignment: Alignment.center,
  60.                   turns: _animationController,
  61.                   child: Container(
  62.                     width: 200,
  63.                     height: 200,
  64.                     decoration: const BoxDecoration(
  65.                       color: Colors.deepPurple,
  66.                       borderRadius: BorderRadius.only(
  67.                         topRight: Radius.circular(70),
  68.                         topLeft: Radius.circular(90),
  69.                         bottomRight: Radius.circular(60),
  70.                         bottomLeft: Radius.circular(80),
  71.                       ),
  72.                     ),
  73.                   ),
  74.                 ),
  75.               ),
  76.               //这个效果很有意思 就是有费性能  不需要可以移除掉
  77.               BackdropFilter(
  78.                 filter: ImageFilter.dilate(radiusX: 3.0, radiusY: 3.0),
  79.                 child: Container(),
  80.               ),
  81.               Positioned(
  82.                 left: 35,
  83.                 top: 45,
  84.                 child: Container(
  85.                   width: 180,
  86.                   height: 180,
  87.                   decoration: BoxDecoration(
  88.                     color: Colors.black,
  89.                     borderRadius: BorderRadius.circular(90),
  90.                   ),
  91.                   child: const Center(
  92.                     child: Text(
  93.                       '89%',
  94.                       style: TextStyle(
  95.                         fontSize: 40,
  96.                         color: Colors.white,
  97.                       ),
  98.                     ),
  99.                   ),
  100.                 ),
  101.               ),
  102.             ],
  103.           ),
  104.         ),
  105.       ),
  106.     );
  107.   }
  109.   int getRandomNumber(int min, int max) {
  110.     var random = Random();
  111.     return min + random.nextInt(max - min + 1);
  112.   }
  114.   List<Widget> buildAnimatedPositioned() {
  115.     List<Widget> _list = [];
  116.     List.generate(
  117.         9,
  118.         (index) => {
  119.               _list.add(BubbleDot(time: getRandomNumber(2000, 3500))),
  120.             });
  122.     return _list;
  123.   }
  124. }

  复制代码
  
  
• BubbleDot.dart    气泡结果    之所以把气泡单独出来是为了后面的随机打散操纵
  1. import 'dart:math';
  2. import 'package:flutter/material.dart';
  4. class BubbleDot extends StatefulWidget {
  5.   final int time;
  6.   const BubbleDot({super.key, required this.time});
  8.   @override
  9.   State<BubbleDot> createState() => _BubbleDotState();
  10. }
  12. class _BubbleDotState extends State<BubbleDot>
  13.     with SingleTickerProviderStateMixin {
  14.   late AnimationController _animationController;
  15.   late Animation<double> _animation;
  16.   final Random random = Random();
  17.   late double _leftPos = 0;
  18.   late double _dotWidth = 0;
  19.   @override
  20.   void initState() {
  21.     _animationController = AnimationController(
  22.       vsync: this,
  23.       duration: Duration(milliseconds: widget.time),
  24.     );
  25.     _animation = _animationController.drive(
  26.         Tween<double>(begin: getRandomNumber(660, 800).toDouble(), end: 100));
  27.     //_leftPos = random.nextDouble() * 200;
  28.     _leftPos = getRandomNumber(35, 180).toDouble();
  29.     _dotWidth = getRandomNumber(30, 66).toDouble();
  31.     _animationController.addStatusListener(
  32.         (AnimationStatus status) => {print('status  $status')});
  33.     _animationController.repeat();
  34.     // TODO: implement initState
  35.     super.initState();
  36.   }
  38.   @override
  39.   void dispose() {
  40.     // TODO: implement dispose
  41.     _animationController.dispose();
  42.     super.dispose();
  43.   }
  45.   @override
  46.   Widget build(BuildContext context) {
  47.     return AnimatedBuilder(
  48.       animation: _animation,
  49.       builder: (BuildContext context, Widget? child) {
  50.         return Positioned(
  51.           top: _animation.value,
  52.           //top: 240,
  53.           left: _leftPos,
  54.           child: ClipOval(
  55.             child: Container(
  56.               width: _dotWidth,
  57.               height: _dotWidth,
  58.               decoration: BoxDecoration(
  59.                 color: Colors.deepPurple,
  60.                 boxShadow: [
  61.                   BoxShadow(
  62.                     color: Colors.deepPurple.withOpacity(0.5),
  63.                     spreadRadius: 6,
  64.                     blurRadius: 8,
  65.                     offset: Offset(4, 4), // changes position of shadow
  66.                   ),
  67.                 ],
  68.               ),
  69.             ),
  70.           ),
  71.         );
  72.       },
  73.     );
  74.   }
  76.   int getRandomNumber(int min, int max) {
  77.     return min + random.nextInt(max - min + 1);
  78.   }
  79. }

  复制代码
  
  

  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。