Flutter实战小案例

(实战)点不到的按钮

// 主要实现效果类
class _MyHomePageState extends State<MyHomePage> {// 1.定义要使用的变量double btnLeft = 0;double btnTop = 0;int timeDuration = 500;String textButton = "点我呀";// 2.获得当前设备屏幕尺⼨，需要import 'dart:ui'var s = window.physicalSize / window.devicePixelRatio;// 3.新建⼀个随机对象，import 'dart:math';var rng = new Random()// 4.初始化init变量的值  @overridevoid initState() {randomPosition();super.initState();}// 5.随机变化left和top的值randomPosition() {setState(() {btnLeft = rng.nextDouble() * (s.width - 100);btnTop = rng.nextDouble() * (s.height - 40);});}// 6.widgets渲染@overrideWidget build(BuildContext context) {return Stack(children: [AnimatedPositioned(duration: Duration(milliseconds: timeDuration),left: btnLeft,top: btnTop,width: 100,height: 40,child: ElevatedButton(onPressed: randomPosition,child: Text(textButton),))],);}
}

（实战）点不到的按钮修改

• 修改按钮的宽200和⾼80
• 设置背景⾊ rgb 值为 136, 138, 226
• 按钮文本颜⾊设置为黑⾊
• 文本设置为：初次见面

class MyHomePage extends StatefulWidget {const MyHomePage({Key? key, required this.title}) : super(key: key);final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {double btnLeft = 0;double btnTop = 0;int timeDuration = 500;String textButton = "初次见面";var s = window.physicalSize / window.devicePixelRatio;var rng = Random();// 创建背景颜色对象var backColor = const BoxDecoration(color: Color.fromRGBO(136, 138, 226, 1));@overridevoid initState() {randomPosition();super.initState();}randomPosition() {setState(() {btnLeft = Random().nextDouble() * (s.width - 100);btnTop = Random().nextDouble() * (s.height - 40);});}@overrideWidget build(BuildContext context) {return Container(decoration: backColor,child: Stack(children: [Positioned(left: btnLeft,top: btnTop,width: 200,height: 80,child: ElevatedButton(onPressed: randomPosition,child: Text(textButton,// 修改文本颜色style: const TextStyle(color: Colors.black,),),)),],),);}
}