Flutter点线动画插件line_dot_dot的使用

特性

开始使用

使用方法

额外信息

感谢您使用LineDotDot。

示例代码

以下是一个简单的示例，展示了如何在Flutter项目中使用line_dot_dot插件。

import 'package:flutter/material.dart';
import 'package:line_dot_dot/line_dot_dot.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("LineDotDot 动画示例"),
        ),
        body: Center(
          child: LineDotDotExample(),
        ),
      ),
    );
  }
}

class LineDotDotExample extends StatefulWidget {
  [@override](/user/override)
  _LineDotDotExampleState createState() => _LineDotDotExampleState();
}

class _LineDotDotExampleState extends State<LineDotDotExample> {
  bool _isLoading = false;

  void _startAnimation() async {
    setState(() {
      _isLoading = true;
    });

    await CommandLineAnimation.lineDotDot(
      future: Future.delayed(Duration(seconds: 3)), // 模拟一个耗时操作
      prompt: '加载中', // 提示文字
    );

    setState(() {
      _isLoading = false;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: _startAnimation,
          child: Text(_isLoading ? "正在加载..." : "开始加载"),
        ),
        SizedBox(height: 20),
        Visibility(
          visible: _isLoading,
          child: Text("加载中..."),
        )
      ],
    );
  }
}

代码解释

1. 导入包:

   import 'package:flutter/material.dart';
   import 'package:line_dot_dot/line_dot_dot.dart';
   

   导入Flutter核心库和line_dot_dot包。

2. 主应用类:

   void main() => runApp(MyApp());
   

   定义主应用类MyApp。

3. 应用UI:

   class MyApp extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text("LineDotDot 动画示例"),
           ),
           body: Center(
             child: LineDotDotExample(),
           ),
         ),
       );
     }
   }
   

   创建一个简单的Flutter应用界面，包含一个按钮用于触发动画。

4. 状态管理类:

   class _LineDotDotExampleState extends State<LineDotDotExample> {
     bool _isLoading = false;
   
     void _startAnimation() async {
       setState(() {
         _isLoading = true;
       });
   
       await CommandLineAnimation.lineDotDot(
         future: Future.delayed(Duration(seconds: 3)), // 模拟一个耗时操作
         prompt: '加载中', // 提示文字
       );
   
       setState(() {
         _isLoading = false;
       });
     }
   

   状态管理类_LineDotDotExampleState负责控制加载状态，并调用CommandLineAnimation.lineDotDot来启动动画。

5. 构建UI:

   [@override](/user/override)
   Widget build(BuildContext context) {
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: <Widget>[
         ElevatedButton(
           onPressed: _startAnimation,
           child: Text(_isLoading ? "正在加载..." : "开始加载"),
         ),
         SizedBox(height: 20),
         Visibility(
           visible: _isLoading,
           child: Text("加载中..."),
         )
       ],
     );
   }