Flutter组件展示插件flutter_widget_catalogue的使用

Flutter组件展示插件flutter_widget_catalogue的使用

通过使用Flutter的组件集合（包括视觉、结构、平台、UI和交互式小部件），您可以非常快速地创建出色的App。这是一个开源包。

按钮

这个包中包含了所有类型的按钮。认证按钮用于通过最受欢迎的社会网络进行身份验证，如：Google、Facebook、Apple等。此外，还可以添加更多类型的按钮，例如（圆角按钮、简单按钮、边框颜色按钮等）。

切换开关

这是一个为Flutter创建的易于实现的自定义切换开关。它可以设置自定义高度和宽度、颜色、大小、开关和滑块的边框、圆角半径、颜色、滑块大小，并且可以显示“开”和“关”的文本，还可以在滑块内添加自定义图标。

Neumorphic

这是一套完整的、可以直接使用的Neumorphic UI工具包，包括按钮、切换开关、容器、滑块、文本、图标、复选框、切换、指示器、范围滑块等。

安装

1. 在pubspec.yaml文件中添加依赖。

dependencies:
  flutter_widget_catalogue: <最新版本>

1. 导入包。

import 'package:flutter_widget_catalogue/flutter_widget_catalogue.dart';

Neumorphic小部件

按钮

切换开关

如何使用按钮

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Buttons',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Buttons(),
    );
  }
}

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

class _ButtonsPageState extends State<Buttons> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
        child: SingleChildScrollView(
          child: Column(
            children: [
              // 简单按钮
              customContainer(
                child: SuccessButton(
                  title: "成功按钮",
                  onPressed: () {},
                ),
              ),
              
              // 带图标的按钮
              customContainer(
                child: ButttonWithIcon(
                  icon: Icons.local_cafe,
                  title: "带图标的按钮",
                  color: Colors.white,
                  buttonColor: Colors.cyan,
                  onPressed: () {},
                ),
              ),
              
              // 浮动按钮
              Wrap(
                children: [
                  FloatingIconButton(
                    icon: Icons.home,
                    onPressed: () {},
                    buttonColor: Colors.orange,
                  ),
                  FloatingIconButton(
                    icon: Icons.home,
                    onPressed: () {},
                    buttonColor: Colors.cyan,
                    color: Colors.white,
                  )
                ],
              ),
              
              // 线性按钮
              customContainer(
                child: PrimaryLineButton(
                  onPressed: () {},
                  title: "线性按钮",
                ),
              ),
              customContainer(
                child: InfoLineButton(
                  textColor: Colors.black,
                  onPressed: () {},
                  title: "信息线性按钮",
                ),
              ),
              
              // 圆角按钮
              customContainer(
                child: RoundedButtonWithIcon(
                  onPressed: () {},
                  icon: Icons.title,
                  title: "带图标的圆角按钮",
                  buttonColor: Colors.green,
                ),
              ),
              
              // 社交媒体按钮
              Wrap(
                children: [
                  FacebookButton(
                    onPressed: () {},
                  ),
                  TwitterButton(
                    onPressed: () {},
                  ),
                ],
              ),
              SignInWithEmail(
                onPressed: () {},
              ),
              SignInWithGoogle(
                onPressed: () {},
              ),
              SignInWithMicrosoft(
                onPressed: () {},
              ),
              SignInWithApple(
                onPressed: () {},
              ),
              
              // 渐变按钮
              customContainer(
                child: GradientButton(
                  onPressed: () {},
                  splashColor: Colors.orange,
                  colors: const [
                    Colors.red,
                    Colors.orange,
                  ],
                  title: "渐变按钮",
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

如何使用切换开关

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

class _MyHomePageState extends State<MyHomePage> {
  bool status = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("切换开关"),
      ),
      body: Center(
        child: Container(
          child: FlutterSwitch(
            width: 125.0,
            height: 55.0,
            valueFontSize: 25.0,
            toggleSize: 45.0,
            value: status,
            borderRadius: 30.0,
            padding: 8.0,
            showOnOff: true,
            onToggle: (val) {
              setState(() {
                status = val;
              });
            },
          ),
        ),
      ),
    );
  }
}