Flutter丰富界面组件插件awesome_widgets的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter丰富界面组件插件awesome_widgets的使用

自定义的小部件和组件,可直接在您的项目中使用!

安装

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

dependencies:
  awesome_widgets: ^<最新版本>

小部件

1. Awesome Snackbar🔥

AwesomeSnackbar.style1(
  duration: Duration(seconds: 10), // 持续时间
  context: context, // 当前上下文
  primaryColor: Colors.blue, // 主颜色
  title: "Demo snackbar", // 标题
  subTitle: "Demo description", // 子标题
  titleTextstyle: TextStyle(color: KConstantColors.bgColor), // 标题样式
  subtitleTextstyle: TextStyle(color: KConstantColors.bgColor, fontSize: 13), // 子标题样式
  backgroundColor: Colors.white, // 背景颜色
  iconData: Icons.check, // 图标
  iconColor: Colors.white); // 图标颜色

AwesomeSnackbar

2. Awesome TextField🔥

AwesomeTextfield.filled(
  hintText: "Title", // 提示文本
  textEditingController: textEditingController, // 文本控制器
  fillColor: Colors.grey, // 填充颜色
),

AwesomeTextField

3. Awesome Buttons🔥

AwesomeButton.roundedIconButton(
  onTap: () { // 点击事件
    // 执行操作
  },
  title: 'Create', // 按钮文本
),

更多关于Flutter丰富界面组件插件awesome_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter丰富界面组件插件awesome_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,awesome_widgets 是一个 Flutter 插件库,提供了许多丰富的界面组件,可以帮助开发者快速构建漂亮且功能强大的应用。以下是一些常见组件的使用示例代码。

1. AwesomeAlert

AwesomeAlert 是一个高度可定制的对话框组件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Awesome Widgets Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              AwesomeAlert(
                context: context,
                animType: "slideFromTop",
                title: "Alert",
                desc: "This is an awesome alert!",
                closeFunction: () {},
              )..show();
            },
            child: Text('Show Alert'),
          ),
        ),
      ),
    );
  }
}

2. AwesomeButton

AwesomeButton 是一个具有多种风格的按钮组件。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Awesome Widgets Demo'),
        ),
        body: Center(
          child: AwesomeButton(
            text: 'Click Me',
            color: Colors.blue,
            onPressed: () {
              print('Button Clicked!');
            },
            borderColor: Colors.white,
            borderWidth: 2.0,
            borderRadius: 15.0,
            elevation: 5.0,
            shadowColor: Colors.black.withOpacity(0.3),
            icon: Icons.thumb_up,
            iconPosition: IconPosition.right,
            iconPadding: EdgeInsets.only(right: 10.0),
            size: Size(200, 50),
          ),
        ),
      ),
    );
  }
}

3. AwesomeList

AwesomeList 是一个带有动画效果的列表组件。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Awesome Widgets Demo'),
        ),
        body: AwesomeList(
          list: List.generate(
            20,
            (index) => 'Item $index',
          ),
          itemBuilder: (context, index, data) {
            return ListTile(
              title: Text(data),
              trailing: Icon(Icons.arrow_forward),
            );
          },
        ),
      ),
    );
  }
}

4. AwesomeProgressIndicator

AwesomeProgressIndicator 是一个自定义的进度指示器组件。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Awesome Widgets Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircularProgressIndicator(), // Default Flutter progress indicator
              SizedBox(height: 20),
              AwesomeProgressIndicator(
                progress: 0.75, // 75% progress
                text: 'Loading...',
                textStyle: TextStyle(fontSize: 18),
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

5. AwesomeSlidable

AwesomeSlidable 是一个滑动删除或操作的组件。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Awesome Widgets Demo'),
        ),
        body: SlidableListView(
          items: List.generate(
            20,
            (index) => 'Item $index',
          ),
          itemBuilder: (context, index, data) {
            return Slidable(
              actionPane: SlidableDrawerActionPane(),
              actions: <Widget>[
                IconSlideAction(
                  caption: 'Archive',
                  color: Colors.blue,
                  icon: Icons.archive,
                  onTap: () {
                    print('$data archived!');
                  },
                ),
                IconSlideAction(
                  caption: 'Delete',
                  color: Colors.red,
                  icon: Icons.delete,
                  onTap: () {
                    print('$data deleted!');
                  },
                ),
              ],
              secondaryActions: <Widget>[
                IconSlideAction(
                  caption: 'More',
                  color: Colors.grey,
                  icon: Icons.more_horiz,
                  onTap: () {
                    print('More options for $data!');
                  },
                ),
              ],
              child: ListTile(
                title: Text(data),
              ),
            );
          },
        ),
      ),
    );
  }
}

这些示例代码展示了如何使用 awesome_widgets 提供的不同组件来构建用户界面。根据具体需求,你可以进一步自定义这些组件的样式和行为。

回到顶部