Flutter小型组件插件mini_widget的使用

Flutter小型组件插件mini_widget的使用

mini_widget

Flutter 常用组件封装

GitHub code size in bytes

安装:

flutter pub add mini_widget

使用：

import 'package:mini_widget/mini_widget.dart';

示例代码

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:mini_widget/mini_widget.dart'; // 导入mini_widget包

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: ThemeData(
        // 应用的主题
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你已经按了按钮这么多次:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

更多关于Flutter小型组件插件mini_widget的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


mini_widget 是一个轻量级的 Flutter 组件库，旨在为开发者提供一些常用的小型组件，以便快速构建用户界面。它通常包含一些基本的 UI 组件，如按钮、卡片、输入框、文本样式等，可以帮助开发者减少重复代码的编写。

安装 mini_widget

首先，你需要在 pubspec.yaml 文件中添加 mini_widget 依赖：

dependencies:
  flutter:
    sdk: flutter
  mini_widget: ^版本号

然后，运行 flutter pub get 来安装依赖。

使用 mini_widget

mini_widget 提供了一些常用的组件，下面是一些常见的使用示例：

1. 按钮 (Button)

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MiniWidget Example'),
      ),
      body: Center(
        child: MiniButton(
          onPressed: () {
            print('Button Pressed');
          },
          text: 'Click Me',
        ),
      ),
    );
  }
}

2. 卡片 (Card)

MiniCard(
  margin: EdgeInsets.all(16),
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('This is a card'),
  ),
)

3. 输入框 (TextField)

MiniTextField(
  hintText: 'Enter your name',
  onChanged: (value) {
    print('Input: $value');
  },
)

4. 文本样式 (TextStyle)

Text(
  'Hello, MiniWidget!',
  style: MiniTextStyle.title,
)

5. 图标按钮 (IconButton)

MiniIconButton(
  icon: Icons.favorite,
  onPressed: () {
    print('Icon Button Pressed');
  },
)

自定义主题

mini_widget 通常也支持自定义主题，以便你可以根据应用的整体设计风格来调整组件的外观。

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    // 其他主题设置
  ),
  home: MyHomePage(),
)
回到顶部