Flutter自定义设计组件插件shajude_design的使用

Flutter自定义设计组件插件shajude_design的使用

Shajude 🎨✨ #

使用Shajude Design创建下一个Flutter应用！我们让开发者轻松构建视觉上令人惊叹且直观的应用程序无需担心UX/UI。让我们帮助你打造干净而精致的应用，给用户留下深刻印象！🚀💡

介绍

Shajude Design是一个开源项目，提供了一系列低级别的Flutter元素和UI组件。我们的使命是简化你的开发过程，并确保你的应用程序以其无与伦比的用户体验和令人惊艳的用户界面脱颖而出。✨📲

功能

  • 🦄 高质量、预工程化的小组件：通过使用我们的行业标准Flutter元素来节省时间和精力。
  • ⚙️ 可定制且灵活的设计选项：根据自己的喜好调整应用外观，同时保持简洁的美学风格。
  • 📚 全面的文档和使用示例：我们一步步引导你，让你专注于提供无缝的用户体验。

借助Shajude Design，你的开发人员可以释放创造力，毫不费力地构建出色的应用程序。告别为UX/UI担忧的烦恼，让我们为你处理设计细节吧。🎉🎨

加入我们，通过Shajude Design踏上轻松设计应用程序的多彩旅程！让我们一起创造让用户惊叹的应用程序吧！😍🌟

预工程化元素列表 🚀

按钮与输入字段

看看用Shajude Design系统设计的登录页面示例。

  • 我们的预工程化按钮经过精心设计，像素完美，适用于任何类型的应用程序，并且严格遵循UX指南，确保用户体验不受影响。

使用的元素

  • ShajuDeMobileField
  • ShajuDeButton

完整示例代码

import 'package:flutter/material.dart';
import 'package:shajude_design/shajude_design.dart'; // 引入Shajude Design库

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginPage(), // 登录页面
    );
  }
}

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

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login() {
    print('Email: ${_emailController.text}');
    print('Password: ${_passwordController.text}');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录页面'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用ShajuDeMobileField作为输入框
            ShajuDeMobileField(
              controller: _emailController,
              hintText: '请输入邮箱',
              labelText: '邮箱',
            ),
            SizedBox(height: 16), // 添加间距
            ShajuDeMobileField(
              controller: _passwordController,
              hintText: '请输入密码',
              labelText: '密码',
              obscureText: true, // 密码隐藏
            ),
            SizedBox(height: 24), // 添加间距
            // 使用ShajuDeButton作为登录按钮
            ShajuDeButton(
              onPressed: _login,
              text: '登录',
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter自定义设计组件插件shajude_design的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义设计组件插件shajude_design的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


shajude_design 是一个 Flutter 自定义设计组件插件，旨在帮助开发者快速构建美观且功能丰富的用户界面。以下是如何使用 shajude_design 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 shajude_design 插件的依赖。

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

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

2. 导入插件

在你的 Dart 文件中导入 shajude_design 插件。

import 'package:shajude_design/shajude_design.dart';

3. 使用组件

shajude_design 提供了多种自定义组件，你可以直接在项目中使用它们。以下是一些常见组件的使用示例。

3.1 自定义按钮

ShajudeButton(
  onPressed: () {
    // 按钮点击事件
  },
  text: 'Click Me',
  color: Colors.blue,
  textColor: Colors.white,
)

3.2 自定义卡片

ShajudeCard(
  child: Column(
    children: [
      Text('Card Title'),
      Text('This is a custom card widget.'),
    ],
  ),
  elevation: 5.0,
  color: Colors.white,
)

3.3 自定义输入框

ShajudeTextField(
  hintText: 'Enter your name',
  onChanged: (value) {
    // 输入内容变化时的回调
  },
  borderColor: Colors.grey,
  borderRadius: 8.0,
)

3.4 自定义加载指示器

ShajudeLoadingIndicator(
  color: Colors.blue,
  size: 50.0,
)

4. 自定义主题

shajude_design 还支持自定义主题，你可以通过 ShajudeTheme 来统一设置应用的主题样式。

MaterialApp(
  theme: ShajudeTheme.lightTheme,
  home: MyHomePage(),
)

5. 其他组件

shajude_design 还提供了其他一些组件，如 ShajudeAppBar、ShajudeDialog 等，你可以根据项目需求进行使用。

6. 示例代码

以下是一个完整的示例代码，展示了如何使用 shajude_design 插件中的多个组件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ShajudeTheme.lightTheme,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ShajudeAppBar(
        title: Text('Shajude Design Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ShajudeButton(
              onPressed: () {
                // 按钮点击事件
              },
              text: 'Click Me',
              color: Colors.blue,
              textColor: Colors.white,
            ),
            SizedBox(height: 20),
            ShajudeCard(
              child: Column(
                children: [
                  Text('Card Title'),
                  Text('This is a custom card widget.'),
                ],
              ),
              elevation: 5.0,
              color: Colors.white,
            ),
            SizedBox(height: 20),
            ShajudeTextField(
              hintText: 'Enter your name',
              onChanged: (value) {
                // 输入内容变化时的回调
              },
              borderColor: Colors.grey,
              borderRadius: 8.0,
            ),
            SizedBox(height: 20),
            ShajudeLoadingIndicator(
              color: Colors.blue,
              size: 50.0,
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部