Flutter手工应用UI组件插件handmade_app_ui的使用

handmade_app_ui

Pub Points
Pub Publisher

Information

手作App专用的Flutter包。

Getting Started

该包是为开发手作App平台而设计的通用UI库。因此，个人使用时可能不适合某些部分，请仅将其作为参考使用。

注意事项：

  • 由于此包是为手作App开发而设计的，因此不会接受非手作App开发目的的请求开发。

使用示例

以下是一个完整的示例，展示如何使用handmade_app_ui包创建一个简单的手作App界面。

1. 添加依赖

在pubspec.yaml文件中添加以下依赖：

dependencies:
  handmade_app_ui: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

2. 创建手作App界面

以下代码展示了如何使用handmade_app_ui构建一个简单的手作App界面。

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

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

class MyHandmadeApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HandmadeHomePage(),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

class HandmadeHomePage extends StatefulWidget {
  [@override](/user/override)
  _HandmadeHomePageState createState() => _HandmadeHomePageState();
}

class _HandmadeHomePageState extends State<HandmadeHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: HandmadeAppBar(
        title: Text('手作App'),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            HandmadeCard(
              child: ListTile(
                leading: Icon(Icons.pie_chart),
                title: Text('手作项目'),
                subtitle: Text('查看所有手作项目'),
                onTap: () {
                  // 跳转到项目页面
                },
              ),
            ),
            HandmadeCard(
              child: ListTile(
                leading: Icon(Icons.add),
                title: Text('新增项目'),
                subtitle: Text('创建新的手作项目'),
                onTap: () {
                  // 跳转到新增项目页面
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


handmade_app_ui 是一个用于 Flutter 的 UI 组件库，旨在帮助开发者快速构建具有手工风格的应用界面。它提供了一系列预定义的组件，如按钮、卡片、输入框等，这些组件都具有独特的手工设计风格。

安装 handmade_app_ui

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

dependencies:
  flutter:
    sdk: flutter
  handmade_app_ui: ^1.0.0  # 请使用最新版本

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

使用 handmade_app_ui 组件

安装完成后，你可以在你的 Flutter 应用中使用 handmade_app_ui 提供的组件。以下是一些常见组件的使用示例：

1. 手工风格按钮

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

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

2. 手工风格卡片

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Handmade App UI'),
      ),
      body: Center(
        child: HandmadeCard(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text('This is a handmade card!'),
          ),
        ),
      ),
    );
  }
}

3. 手工风格输入框

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Handmade App UI'),
      ),
      body: Center(
        child: HandmadeTextField(
          hintText: 'Enter your text here',
          onChanged: (value) {
            print('Text changed: $value');
          },
        ),
      ),
    );
  }
}

自定义样式

handmade_app_ui 组件通常允许你通过参数来自定义样式。例如，你可以通过 color 参数来改变按钮的颜色，或者通过 borderRadius 参数来调整卡片的圆角。

HandmadeButton(
  onPressed: () {
    print('Button Pressed!');
  },
  text: 'Click Me',
  color: Colors.orange,
  borderRadius: 20.0,
);
回到顶部