Flutter动画按钮插件askai_animation_button的使用

Flutter动画按钮插件askai_animation_button的使用

askai_animation_button

模仿TikTok直播间的按钮。

如何使用

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  askai_animation_button: ^last version

使用

查看示例代码：示例代码

const KaiAnimationButton(
      {Key? key,
      required this.text,   // 按钮内的文本
      required this.innerCircleColor,   // 内圆的颜色。[开始，结束]
      required this.outerRingColor,     // 外环的颜色。[开始，结束]
      this.style,   // 文本样式
      required this.onTap,  
      required this.innerWidth, // 内圆的宽度。[开始，结束]
      required this.outerRingWidth, // 外环的宽度。[开始，结束]
      required this.outerRingHeight})   // 外环的高度。[开始，结束]
      : super(key: key);

渲染效果

如果你有任何问题或建议，请联系我

或提交问题到issues

入门指南

此项目是一个 Flutter 插件包的起点，包含 Android 和/或 iOS 的平台特定实现代码。

有关如何开始使用 Flutter 的帮助，请参阅我们的 在线文档，其中提供了教程、示例、移动开发指南以及完整的 API 参考。

示例代码

以下是使用 KaiAnimationButton 的完整示例代码：

import 'package:askai_animation_button/animationButton.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    VoidCallback _onTap = () {
      return print('aaa');
    };

    return ScreenUtilInit(
      builder: () => MaterialApp(
        debugShowCheckedModeBanner: false,
        home: DemoPage()
      ),
      designSize: Size(750, 1334),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        color: Colors.black45,
        child: Center(
          child: Container(
            width: MediaQuery.of(context).size.width,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('@author As.Kai'),
                SizedBox(
                  height: 100,
                ),
                KaiAnimationButton(
                  text: '点击进入直播间',
                  innerCircleColor: [
                    Color.fromRGBO(205, 201, 201, 98),
                    Color.fromRGBO(238, 233, 233, 1)
                  ],
                  outerRingColor: [
                    Color.fromRGBO(238, 233, 233, 0),
                    Color.fromRGBO(205, 201, 201, 98)
                  ],
                  onTap: () {
                    print('aaa');
                  },
                  innerWidth: [190.0, 200],
                  outerRingWidth: [190.0, 240.0],
                  outerRingHeight: [
                    ScreenUtil().setHeight(80),
                    ScreenUtil().setHeight(120)
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter动画按钮插件askai_animation_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画按钮插件askai_animation_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


askai_animation_button 是一个 Flutter 插件，用于创建具有动画效果的按钮。它可以帮助你在应用中添加更具交互性和视觉吸引力的按钮。以下是如何使用 askai_animation_button 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 askai_animation_button 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  askai_animation_button: ^1.0.0  # 请确保使用最新版本

然后，运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 askai_animation_button 插件：

import 'package:askai_animation_button/askai_animation_button.dart';

3. 使用 AskaiAnimationButton

你可以在你的 Flutter 应用中使用 AskaiAnimationButton 来创建一个动画按钮。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Askai Animation Button Example'),
        ),
        body: Center(
          child: AskaiAnimationButton(
            onPressed: () {
              print('Button Pressed!');
            },
            child: Text('Press Me'),
            buttonColor: Colors.blue,
            animationDuration: Duration(milliseconds: 500),
            scaleFactor: 1.2,
          ),
        ),
      ),
    );
  }
}
回到顶部