Flutter极简风格UI插件flutter_minimalist的使用

Flutter极简风格UI插件flutter_minimalist的使用

特性

  • 功能作为扩展。
  • 极简代码。
  • 最大化生产力。
  • 更有意义且可读的代码结构。

插件展示图

开始使用

在你的 pubspec.yaml 文件中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  # 添加 flutter_minimalist
  flutter_minimalist: ^1.0.0 # 请替换为最新版本号

然后运行 flutter pub get 来获取新的依赖。

使用方法

间距

对于 Row()Column() 小部件内的间距(如边距或填充),可以直接调用 num 类型的 getter。

Column(
  children: [
    16.verticalSpace, // 等效于 SizedBox(height: 16)
    /// 其他一些小部件
    16.verticalSpace, // 等效于 SizedBox(height: 16)
    Row(
      children: [
        16.horizontalSpace, // 等效于 SizedBox(width: 16)
        // 其他一些小部件
        16.horizontalSpace, // 等效于 SizedBox(width: 16)
        // 其他一些小部件
      ]
    ),
  ]
)

边距和填充

对于所有方向的填充和边距,可以直接调用 num 类型的 getter。

Container(
  padding: 16.allPadding, // 等效于 EdgeInsets.all(16)
  margin: 16.allMargin, // 等效于 EdgeInsets.all(16)
)

// 对于单个方向的填充和边距
Container(
  padding: 16.leftPadding, // 等效于 EdgeInsets.only(left: 16)
  margin: 16.leftMargin, // 等效于 EdgeInsets.only(left: 16)
)

Duration简化

可以简化 Duration 的创建方式:

void example(){
  1.seconds; // 等效于 Duration(seconds: 1)
  1000.milliSeconds; // 等效于 Duration(milliseconds: 1000)
  1000000.microSeconds; // 等效于 Duration(microseconds: 1000000)
  2.minutes; // 等效于 Duration(minutes: 2)
  1.hours; // 等效于 Duration(hours: 1)
}

Future.delay简化

可以更简洁地使用 Future.delay

void example() {
  1000.milliSeconds.delay.then((val){
    // 在延迟1秒后执行的操作
  });
}

贡献

欢迎贡献!如果您想贡献,请到 GitHub 上 fork 仓库并提交拉取请求。

问题反馈

如果您遇到任何问题或错误,请自由地在 GitHub Issue Tracker 中报告。我们会尽快处理。

支持

如果您有任何问题或需要帮助,请联系 saiful161003@gmail.com

许可证

该包在 MIT 许可下发布。


示例代码

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

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

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

  // 这个小部件是您的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Example'),
    );
  }
}

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> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          16.verticalSpace, // 等效于 SizedBox(height: 16)
          Container(
            padding: 16.allPadding, // 等效于 EdgeInsets.all(16)
            margin: 16.allMargin, // 等效于 EdgeInsets.all(16)
            child: const Text('Be a Minimalist'),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter极简风格UI插件flutter_minimalist的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter极简风格UI插件flutter_minimalist的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,flutter_minimalist 是一个用于创建极简风格用户界面的 Flutter 插件。虽然这个插件可能不是官方广泛认可的库(因为 Flutter 社区中有许多自定义的 UI 插件,且具体名称可能随时间变化),但基于你的要求,我将展示一个假设性的极简风格 UI 实现的代码案例。

通常,极简风格 UI 强调简洁、清晰的布局和颜色搭配。我们将创建一个简单的 Flutter 应用,展示如何使用自定义组件和一些基本的 Flutter 组件来实现这种风格。

首先,确保你的 pubspec.yaml 文件中已经包含了 Flutter 的基本依赖(这里假设没有特定的 flutter_minimalist 插件,而是使用 Flutter 自带的组件):

dependencies:
  flutter:
    sdk: flutter

接下来,创建一个简单的 Flutter 应用。以下是一个示例 main.dart 文件,它展示了如何实现一个极简风格的 UI:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Minimalist UI Demo',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey, // 使用冷色调来营造极简氛围
        brightness: Brightness.light,
        textTheme: TextTheme(
          headline1: TextStyle(fontSize: 24, color: Colors.black87),
          bodyText1: TextStyle(fontSize: 16, color: Colors.black54),
        ),
      ),
      home: MinimalistScreen(),
    );
  }
}

class MinimalistScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Minimalist UI'),
        backgroundColor: Colors.blueGrey[900],
        elevation: 0.0, // 去除阴影,更加简洁
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Welcome to Minimalist UI',
              style: Theme.of(context).textTheme.headline1,
            ),
            SizedBox(height: 16),
            Text(
              'This is a simple demonstration of a minimalist user interface using Flutter.',
              style: Theme.of(context).textTheme.bodyText1,
            ),
            SizedBox(height: 32),
            MinimalistButton(
              text: 'Click Me',
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Button clicked!')),
                );
              },
            ),
            SizedBox(height: 32),
            MinimalistInputField(
              hintText: 'Enter something...',
              onChanged: (value) {
                // 处理文本变化
              },
            ),
          ],
        ),
      ),
    );
  }
}

// 自定义极简风格按钮
class MinimalistButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  const MinimalistButton({Key key, @required this.text, @required this.onPressed})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ButtonStyle(
        overlayColor: MaterialStateProperty.all(Colors.blueGrey[600]!.withOpacity(0.2)),
        shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(16))),
        backgroundColor: MaterialStateProperty.all(Colors.blueGrey[700]),
      ),
      onPressed: onPressed,
      child: Text(
        text,
        style: TextStyle(color: Colors.white, fontSize: 16),
      ),
    );
  }
}

// 自定义极简风格输入框
class MinimalistInputField extends StatelessWidget {
  final String hintText;
  final ValueChanged<String> onChanged;

  const MinimalistInputField({Key key, @required this.hintText, @required this.onChanged})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(16)),
        filled: true,
        fillColor: Colors.grey[200],
        hintText: hintText,
        hintStyle: TextStyle(color: Colors.grey[600], fontSize: 16),
      ),
      onChanged: onChanged,
      style: TextStyle(fontSize: 16, color: Colors.black87),
    );
  }
}

在这个示例中,我们创建了一个简单的 Flutter 应用,其中包含一个标题、一些文本、一个自定义的极简风格按钮和一个输入框。按钮和输入框都使用了自定义组件 MinimalistButtonMinimalistInputField,它们遵循极简设计原则,如使用较少的颜色、清晰的轮廓和简洁的布局。

请注意,实际项目中可能会有更多的自定义组件和更复杂的布局,但这个示例应该能够给你一个良好的起点,展示如何在 Flutter 中实现极简风格的 UI。

回到顶部