Flutter平台自适应按钮插件platform_adaptive_buttons的使用

本文将详细介绍如何在Flutter项目中使用platform_adaptive_buttons插件来创建适应不同平台风格的按钮。

开始使用

只需像平常一样创建按钮，并在其后添加.adaptive()方法即可。此插件支持以下类型的按钮：

• ElevatedButton
• TextButton
• OutlinedButton
• FilledButton

示例代码

ElevatedButton(
    onPressed: () {},
    child: const Text('Tap me!'),
).adaptive(context);

完整示例

下面是一个完整的示例，展示了如何使用platform_adaptive_buttons插件来创建适应不同平台风格的按钮。

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

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

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

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

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

  [@override](/user/override)
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  TargetPlatform? overridePlatform;
  bool useMaterial3 = true;
  bool isDisabled = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        platform: overridePlatform,
        useMaterial3: useMaterial3,
      ),
      child: Builder(builder: (context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('Adaptive Button Example'),
          ),
          floatingActionButton: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              FloatingActionButton.extended(
                onPressed: () {
                  setState(() {
                    isDisabled = !isDisabled;
                  });
                },
                label: Text(isDisabled ? '启用' : '禁用'),
              ),
              const SizedBox(height: 16),
              // 切换 Material 2 和 Material 3
              FloatingActionButton.extended(
                onPressed: () {
                  setState(() {
                    useMaterial3 = !useMaterial3;
                  });
                },
                label: Text(useMaterial3 ? '切换到 Material 2' : '切换到 Material 3'),
              ),
              const SizedBox(height: 16),
              FloatingActionButton.extended(
                onPressed: () {
                  setState(() {
                    overridePlatform = overridePlatform == TargetPlatform.iOS
                        ? null
                        : TargetPlatform.iOS;
                  });
                },
                label: Text(
                    '切换到 ${overridePlatform == TargetPlatform.iOS ? 'Android' : 'iOS'}'),
              ),
            ],
          ),
          body: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                FilledButton(
                  onPressed: isDisabled ? null : () {},
                  child: const Text('填充按钮'),
                ).adaptive(context),
                const SizedBox(height: 16),
                FilledButton.tonal(
                  onPressed: isDisabled ? null : () {},
                  child: const Text('填充按钮（调色板）'),
                ).adaptive(context),
                const SizedBox(height: 16),
                OutlinedButton(
                  onPressed: isDisabled ? null : () {},
                  child: const Text('边框按钮'),
                ).adaptive(context),
                const SizedBox(height: 16),
                TextButton(
                  onPressed: isDisabled ? null : () {},
                  child: const Text('文本按钮'),
                ).adaptive(context),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: isDisabled ? null : () {},
                  child: const Text('提升按钮'),
                ).adaptive(context),
              ],
            ),
          ),
        );
      }),
    );
  }
}