Flutter自适应按钮布局插件flutter_adaptive_buttons的使用

简介

flutter_adaptive_buttons 包提供了一组可以根据当前平台（Android 或 iOS）自动调整其外观的 Flutter 小部件。它使您能够在 Android 和 iOS 平台上创建看起来和行为像原生按钮的按钮。该包包括不同的按钮类型，如 ElevatedButton、TextButton、OutlinedButton 和 IconButton，每个按钮都有自适应的行为和属性。

功能

• 自适应外观：小部件会根据平台（Android 或 iOS）自动调整其视觉样式。
• 细粒度控制：可以为每个平台单独定制外观和行为。
• Material 和 Cupertino 主题：使用原生外观或在需要时覆盖为自定义主题。

安装

将包添加到您的 pubspec.yaml 文件：

dependencies:
  flutter_adaptive_buttons: ^0.0.1

或者使用以下命令通过 Flutter 添加：

flutter pub add flutter_adaptive_buttons

然后导入包：

import 'package:flutter_adaptive_buttons/flutter_adaptive_buttons.dart';

使用

该包提供了几个自适应按钮小部件，您可以将其用于 Flutter 应用程序中：

• AdaptiveElevatedButton：具有自适应外观的凸起按钮。
• AdaptiveTextButton：具有自适应外观的文字按钮。
• AdaptiveOutlinedButton：具有自适应外观的描边按钮。
• AdaptiveIconButton：具有自适应外观的图标按钮。

您还可以使用以下小部件来创建带图标的自适应按钮：

• AdaptiveElevatedButton.icon：带图标的凸起按钮，具有自适应外观。
• AdaptiveTextButton.icon：带图标的文字按钮，具有自适应外观。
• AdaptiveOutlinedButton.icon：带图标的描边按钮，具有自适应外观。
• AdaptiveIconButton.icon：带图标的图标按钮，具有自适应外观。

每个小部件都会根据当前平台（Android 或 iOS）调整其外观，并提供属性以分别自定义每个平台的行为。

示例

示例代码

以下是使用自适应按钮的小例子：

AdaptiveElevatedButton

AdaptiveElevatedButton(
  onPressed: () {},
  child: const Text("ElevatedButton"),
),
AdaptiveElevatedButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.notifications),
  child: const Text("AdaptiveElevatedButton.icon"),
)

AdaptiveTextButton

AdaptiveTextButton(
  onPressed: () {},
  child: const Text("AdaptiveTextButton"),
),
AdaptiveTextButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.notifications),
  child: const Text("AdaptiveTextButton.icon"),
)

AdaptiveOutlinedButton

AdaptiveOutlinedButton(
  onPressed: () {},
  child: const Text("AdaptiveOutlinedButton"),
),
AdaptiveOutlinedButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.notifications),
  child: const Text("AdaptiveOutlinedButton.icon"),
)

完整示例

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

import 'package:flutter/material.dart';

import 'package:flutter_adaptive_buttons/flutter_adaptive_buttons.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Adaptive Buttons',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Adaptive Buttons"),
      ),
      body: const SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButtons(),
              Divider(),
              TextButtons(),
              Divider(),
              OutlinedButtons(),
              Divider(),
              SizedBox(height: 16),
              Divider(),
              IconButtons(),
            ],
          ),
        ),
      ),
    );
  }
}