Flutter自适应按钮插件adaptive_button的使用

Flutter自适应按钮插件adaptive_button的使用

AdaptiveButton 是一个与平台兼容的按钮插件。它在执行异步操作时禁用按钮的点击功能，并在等待期间显示一个加载指示器。

开始使用

首先，导入 adaptive_button 包：

import 'package:adaptive_button/adaptive_button.dart';

平台兼容性展示

iOS

Android

Web

必需的选项

AdaptiveButton 需要以下两个必需参数：

• Widget child: 按钮上显示的文本或图标。
• Future<void> Function() onPressed: 按钮点击后的回调函数。

示例代码：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
      body: Container(
        child: AdaptiveButton(
            child: Text("AdaptiveButton"),
            onPressed: () async {}
        ),
      ));
}

不带加载指示器的使用

默认情况下，当 loadingWidget 属性为空时，会显示一个默认的加载指示器。

示例代码：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
      body: Container(
        child: AdaptiveButton(
          height: 50,
          width: MediaQuery.of(context).size.width,
          enabledLoading: true,
          child: const Text("AdaptiveButton - Without Loading Widget"),
          onPressed: () async {
            await Future.delayed(const Duration(seconds: 2));
            showDialog(
              context: context,
              builder: (context) {
                return const AlertDialog(
                  content: Text("Merhaba ben AdaptiveButton bulunduğum platforma göre şekillenirim:)"),
                );
              },
            );
          },
        ),
      ));
}

不带异步操作的使用

当 enableLoading 属性为空时，可以不使用异步操作。

示例代码：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
      body: Container(
        child: AdaptiveButton(
          color: Colors.amber,
          child: const Text(
            "AdaptiveButton",
            style: TextStyle(color: Colors.black54),
          ),
          onPressed: () async {
            showDialog(
              context: context,
              builder: (context) {
                return const AlertDialog(
                  content: Text("Merhaba ben AdaptiveButton bulunduğum platforma göre şekillenirim:)"),
                );
              },
            );
            debugPrint("AdaptiveButton Test Message");
          },
        ),
      ));
}

自定义大小属性

可以通过 width 和 height 属性来自定义按钮的大小。

示例代码：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: AdaptiveButton(
      height: 50,
      width: MediaQuery.of(context).size.width,
      enabledLoading: true,
      loadingWidget: const SizedBox(
          width: 20,
          height: 20,
          child: CircularProgressIndicator(
            color: Colors.amber,
          )),
      child: const Text("AdaptiveButton - Loading"),
      onPressed: () async {
        await Future.delayed(const Duration(seconds: 2));
        showDialog(
          context: context,
          builder: (context) {
            return const AlertDialog(
              content: Text("Merhaba ben AdaptiveButton bulunduğum platforma göre şekillenirim:)"),
            );
          },
        );
      },
    ),);
}

特性

• double? width: 改变按钮的宽度。
• double? height: 改变按钮的高度。
• Widget child: 确定按钮上显示的文本或图标。（必填）
• Future<void> Function() onPressed: 当按钮被点击时运行的操作。（必填）
• bool? enabledLoading: 设置为 true 时，在异步操作期间显示一个加载指示器，默认为 false。
• Widget? loadingWidget: 设置按钮加载时显示的子组件。
• Color? color: 设置按钮的背景颜色。
• BorderRadius? borderRadius: 允许按钮的角落圆角化，默认为 BorderRadius.circular(8)。
• EdgeInsetsGeometry? padding: 允许设置内边距，默认为 EdgeInsets.symmetric(horizontal: 16)。
• EdgeInsetsGeometry? margin: 允许设置外边距，默认为 EdgeInsets.zero。

完整示例

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:adaptive_button/adaptive_button.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
        debugShowCheckedModeBanner: false, home: AdaptiveButtonView());
  }
}

class AdaptiveButtonView extends StatefulWidget {
  const AdaptiveButtonView({Key? key}) : super(key: key);

  [@override](/user/override)
  State<AdaptiveButtonView> createState() => _AdaptiveButtonViewState();
}

class _AdaptiveButtonViewState extends State<AdaptiveButtonView> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.purpleAccent,
        title: const Text('AdaptiveButton Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            /// Without [loadingWidget] property example and async function.
            AdaptiveButton(
              height: 50,
              width: MediaQuery.of(context).size.width,
              enabledLoading: true,
              child: const Center(
                  child: Text("AdaptiveButton - Without Custom Loading Widget(default: Adaptive indicator widget)")),
              onPressed: () async {
                await Future.delayed(const Duration(seconds: 5));
                await showDialog(
                  context: context,
                  builder: (context) {
                    return const AlertDialog(
                      content: Text("Merhaba ben AdaptiveButton bulunduğum platforma göre şekillenirim:)"),
                    );
                  },
                );
              },
            ),

            /// With [loadingWidget] property example and async function.
            AdaptiveButton(
              height: 50,
              width: MediaQuery.of(context).size.width,
              enabledLoading: true,
              loadingWidget: const SizedBox(
                  width: 20,
                  height: 20,
                  child: CircularProgressIndicator(
                    color: Colors.amber,
                  )),
              child: const Text("AdaptiveButton - Custom Loading Widget"),
              onPressed: () async {
                await Future.delayed(const Duration(seconds: 5));
                showDialog(
                  context: context,
                  builder: (context) {
                    return const AlertDialog(
                      content: Text("Merhaba ben AdaptiveButton bulunduğum platforma göre şekillenirim:)"),
                    );
                  },
                );
              },
            ),

            /// Without [loadingWidget] and [enabledLoading] property example and  without async function.
            AdaptiveButton(
              color: Colors.amber,
              child: const Text(
                "AdaptiveButton",
                style: TextStyle(color: Colors.black54),
              ),
              onPressed: () async {
                showDialog(
                  context: context,
                  builder: (context) {
                    return const AlertDialog(
                      content: Text("Merhaba ben AdaptiveButton bulunduğum platforma göre şekillenirim:)"),
                    );
                  },
                );
                debugPrint("AdaptiveButton Test Message");
              },
            ),

            /// Usage with [borderRadius] property.
            AdaptiveButton(
              borderRadius: BorderRadius.circular(20),
              color: Colors.cyan,
              child: const Text("AdaptiveButton - Border Radius"),
              onPressed: () async {
                debugPrint("AdaptiveButton Test Message");
              },
            ),

            /// Usage with [width] and [height] property.
            AdaptiveButton(
              width: 250,
              height: 150,
              borderRadius: BorderRadius.circular(16),
              color: Colors.deepOrange,
              child: const Text("AdaptiveButton - Sized"),
              onPressed: () async {
                debugPrint("AdaptiveButton Test Message");
              },
            ),
          ],
        ),
      ),
    );
  }
}