Flutter插件bellamy的特性与使用方法

Flutter插件bellamy特性

• 预构建主题并自定义
• 预构建UI组件并自定义

Flutter插件bellamy开始前的要求

sdk ">=2.18.0 <3.0.0"
flutter ">=1.17.0"

使用方法

预构建主题

预构建的主题具有根据UI研究默认的颜色。更多预构建主题可以参阅文档。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: AppTheme.nature(), // 使用预构建的主题
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

自定义主题

自定义主题允许你使用默认颜色或自定义自己的颜色。更多细节可以查看文档或示例。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: AppTheme.custom(primary: Colors.red), // 使用自定义主题
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

自定义按钮

自定义按钮小部件使用ElevatedButton作为基础按钮。

AppButton(
  onPressed: () {}, // 按钮点击事件
  borderRadius: 48.0, // 圆角半径
  child: const Text("SUBMIT"), // 按钮文本
),

完整示例

以下是一个完整的示例代码，展示了如何在项目中使用bellamy插件。

import 'package:bellamy/bellamy.dart';
import 'package:bellamy/button.dart';
import 'package:flutter/material.dart';

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

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

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: AppTheme.pastel(), // 使用预构建的主题
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个小部件是你的应用的主页。它是有状态的，意味着它有一个状态对象（定义在下面），
  // 包含影响其外观的字段。
  
  // 这个类是状态的配置。它保存了由父组件（在这个例子中是App小部件）提供的值（如标题）
  // 并且被状态的构建方法使用。小部件子类中的字段总是标记为"final"。
  
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 这次调用setState告诉Flutter框架某些东西已经改变，在这里会导致框架重新运行构建方法
      // 以便反映更新后的值。如果我们不调用setState()来改变_counter，那么构建方法将不会再次运行，
      // 因此看起来好像什么都没有发生。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 这个方法每次调用setState时都会重新运行，例如在上面的_incrementCounter方法中。
    //
    // Flutter框架已经被优化，使得重新运行构建方法非常快，因此你可以重建任何需要更新的东西，
    // 而不是逐个更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 这里我们从MyHomePage对象中获取值，通过App.build方法创建，并将其用于设置我们的appbar标题。
        title: Text(widget.title),
      ),
      body: ListView(
        padding: const EdgeInsets.all(24.0),
        children: [
          const Text(
            '你已经按下了按钮这么多次：',
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headlineMedium,
          ),
          Card(
            color: Theme.of(context).colorScheme.surface,
            child: const Text("data"),
          ),
          AppButton(
            onPressed: () {}, // 按钮点击事件
            borderRadius: 48.0, // 圆角半径
            child: const Text("SUBMIT"), // 按钮文本
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ), // 这个尾随的逗号使自动格式化更美观。
    );
  }
}