Flutter 自定义 UI 组件插件 nibite_ui_elements 的使用

描述

此插件帮助在 Flutter 中创建数据收集表单和导航页面。这是一个项目的早期版本，所以还有很多东西有待完善。

组件

Widgets

• <code>NibiteSpinner</code> - 单个选择器字段
• <code>NibiteProductStack</code> - 单个商品堆栈
• <code>NibiteTextForm</code> - 单个文本表单
• <code>NibiteDivider</code> - 单个分割线

使用

设置

要使用此插件，在 pubspec.yaml 文件中添加 nibite_ui_elements 作为依赖项。 无需特殊设置：只需安装依赖并使用即可。

dependencies:
  flutter:
    sdk: flutter
  nibite_ui_elements: ^0.0.8

基本使用

NibiteSpinner

import 'package:nibite_ui_elements/nibite_spinner.dart';
//...

int quantity = 0;

//...
NibiteSpinner(
  initialValue: 1,
  resultValue: (value) {
    setState(() {
      quantity = value;
    });
  },
),

NibiteProductStack

import 'package:nibite_ui_elements/nibite_product_stack.dart';
//...

NibiteProductStack(
  name: "Product's name",
  image: Image.network(
    'https://cdn.pixabay.com/photo/2017/07/28/14/23/macarons-2548810_1280.jpg',
    fit: BoxFit.cover,
  ),
  price: '\$ 12,34',
  onAddToCart: (GlobalKey cartKey) async {},
  onTap: () {},
),

NibiteTextForm

import 'package:nibite_ui_elements/nibite_text_form.dart';
//...

NibiteTextForm(
  prefixIcon: Icons.account_circle,
  labelText: 'Fieldname',
),

NibiteDivider

import 'package:nibite_ui_elements/nibite_divider.dart';
//...

NibiteDivider(
  labelText: 'Or',
),

示例代码

NibiteSpinner 示例

import 'package:flutter/material.dart';
import 'package:nibite_ui_elements/nibite_spinner.dart';

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

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  int quantity = 1;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Column(
            children: [
              const Text('Nibite Spinner'),
              NibiteSpinner(
                initialValue: quantity,
                isRemovable: true,
                suffix: ' und.',
                style: const NibiteSpinnerStyle(
                  color: Colors.white,
                  buttonColor: Color(0xFF74BC99),
                  buttonTextColor: Colors.white,
                  buttonRemovableColor: Color(0xFFE24D51),
                  buttonRemovableTextColor: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black45,
                      spreadRadius: 1,
                      blurRadius: 2,
                    ),
                  ],
                ),
                resultValue: (value) {
                  setState(() {
                    quantity = value;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

NibiteProductStack 示例

import 'package:flutter/material.dart';
import 'package:nibite_ui_elements/nibite_product_stack.dart';

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

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Column(
            children: [
              const Text('Nibite Product Stack'),
              Expanded(
                child: GridView.builder(
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    mainAxisSpacing: 5,
                    crossAxisSpacing: 5,
                    childAspectRatio: 5 / 6,
                  ),
                  itemCount: 10,
                  itemBuilder: (_, index) {
                    return NibiteProductStack(
                      name: "Product$index's name",
                      image: Image.network(
                        'https://cdn.pixabay.com/photo/2017/07/28/14/23/macarons-2548810_1280.jpg',
                        fit: BoxFit.cover,
                      ),
                      price: '\$ 12,34',
                      onAddToCart: (GlobalKey cartKey) async {},
                      onTap: () {},
                      primaryColor: const Color(0xFF74BC99),
                      foregroundColor: Colors.white,
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

NibiteTextForm 示例

import 'package:flutter/material.dart';
import 'package:nibite_ui_elements/nibite_text_form.dart';

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

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  final _formGlobalKey = GlobalKey<FormState>();

  final userController = TextEditingController();
  String? userValitador(String? user) {
    if (user == null || user.isEmpty) {
      return 'Enter your username';
    }

    if (user.length < 3) return 'Enter a username with at least 3 characters';

    return null;
  }

  final passwordController = TextEditingController();
  String? passwordValidator(String? password) {
    if (password == null || password.isEmpty) {
      return 'Enter your password';
    }

    if (password.length < 6) {
      return 'Enter a password with at least 6 characters';
    }

    return null;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Column(
            children: [
              const Text('Nibite Text Form'),
              Form(
                key: _formGlobalKey,
                child: Column(
                  children: [
                    NibiteTextForm(
                      prefixIcon: Icons.account_circle,
                      labelText: 'Username',
                      validator: userValitador,
                      controller: userController,
                    ),
                    NibiteTextForm(
                      prefixIcon: Icons.lock,
                      labelText: 'Password',
                      isObscureText: true,
                      validator: passwordValidator,
                      controller: passwordController,
                    ),
                    ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(18),
                        ),
                      ),
                      onPressed: () {},
                      child: const Text(
                        'Login',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

NibiteDivider 与 NibiteTextForm 示例

import 'package:flutter/material.dart';
import 'package:nibite_ui_elements/nibite_divider.dart';
import 'package:nibite_ui_elements/nibite_text_form.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Column(
            children: [
              const Text('Nibite Divider with Text Form'),
              Column(
                children: [
                  const NibiteTextForm(
                    prefixIcon: Icons.account_circle,
                    labelText: 'Username',
                  ),
                  const NibiteTextForm(
                    prefixIcon: Icons.lock,
                    labelText: 'Password',
                    isObscureText: true,
                  ),
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(18),
                      ),
                    ),
                    onPressed: () {},
                    child: const Text(
                      'Login',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  const NibiteDivider(
                    labelText: 'Or',
                  ),
                  OutlinedButton(
                    style: OutlinedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(18),
                      ),
                      side: const BorderSide(
                        width: 2,
                      ),
                    ),
                    onPressed: () {},
                    child: const Text(
                      'Login with Social Account',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}