Flutter自定义组件插件pro_widgets的使用

PRO WIDGETS

一个包含一系列简化组件的Flutter包，可以让你的应用开发更简单、更快捷。这些Flutter组件被封装为pro widgets，以便于在你的应用中轻松使用。

注意事项

默认值或尺寸在pro widgets中不是响应式的。为了实现响应式效果，你必须传递相应的响应式参数。我们将会尽快添加响应式值。此外，我们还会不断添加更多的组件。

组件列表

• ProText
• ProShape
• ProCard
• ProSvgAsset
• ProSvgURL
• ProAssetImage
• ProNetworkImage
• ProButtonBasic
• ProButtonText
• ProTextField
• ProTextFormField
• ProDivider
• ProGap
• ProTapper
• ProScaffold
• ProAlertClassic

函数

• proBoxDecoration()
• proBottomSheet()

示例

下面是使用pro_widgets的一些示例代码。你可以通过这些代码来了解如何使用这些组件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'pro_widgets',
      home: UdWidgetsDemo(),
    );
  }
}

class UdWidgetsDemo extends StatelessWidget {
  const UdWidgetsDemo({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ProScaffold(
      backgroundColor: Colors.grey[50],
      appBar: AppBar(
        elevation: 2,
        centerTitle: true,
        title: const ProText(
          text: "App Bar",
          fontSize: 16,
          fontWeight: FontWeight.w600,
          color: Colors.white,
        ),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: [
              const ProGap(y: 16), // 垂直间距
              const ProText(text: "This is a text"), // 文本组件
              const ProGap(y: 16), // 垂直间距
              const Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ProShape( // 形状组件
                    width: 60,
                    height: 60,
                    radius: 30,
                    child: ProText(text: 'Shape', color: Colors.white),
                  ),
                  ProGap(x: 20), // 水平间距
                  ProShape(
                    width: 60,
                    height: 60,
                    radius: 4,
                    child: ProText(
                      text: 'Shape',
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
              const ProGap(y: 16), // 垂直间距
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    decoration: proBoxDecoration( // 装饰容器
                      enableShadow: true,
                      shadowColor: Colors.blueGrey.withOpacity(0.3),
                      borderRadius: 50,
                    ),
                    child: const ProAssetImage( // 资源图片
                      imagePath: "assets/sia.jpg",
                      width: 100,
                      height: 100,
                      borderRadius: 50,
                      boxFit: BoxFit.cover,
                    ),
                  ),
                  const ProGap(x: 20), // 水平间距
                  ProTapper( // 点击检测组件
                    onTap: () {},
                    child: const ProNetworkImage( // 网络图片
                      width: 100,
                      height: 100,
                      borderRadius: 4,
                      imageUrl: "https://googleflutter.com/sample_image.jpg",
                    ),
                  ),
                ],
              ),
              const ProGap(y: 16), // 垂直间距
              ProCard( // 卡片组件
                width: 300,
                shadowColor: Colors.blueGrey.withOpacity(0.3),
                child: const Align(
                  alignment: Alignment.center,
                  child: Column(
                    children: [
                      ProText(
                        text: "Card",
                        fontSize: 18,
                      ),
                      ProGap(y: 16), // 垂直间距
                      ProTextField( // 文本输入框
                        width: 200,
                        height: 45,
                        hint: "Text Field",
                      ),
                      ProGap(y: 16), // 垂直间距
                      ProTextFormField( // 表单输入框
                        width: 200,
                        paddingVertical: 14,
                        hint: "Text Form Field",
                      ),
                    ],
                  ),
                ),
              ),
              const ProGap(y: 16), // 垂直间距
              ProButtonBasic( // 基础按钮
                text: "Button",
                width: 300,
                borderRadius: 4,
                onTap: () {
                  proBottomSheet( // 弹出底部菜单
                    context: context,
                    appBarTitle: "AppBar",
                    isScrollControlled: true,
                    sheetBody: const SizedBox.shrink(),
                  );
                },
              ),
              const ProGap(y: 16), // 垂直间距
              const ProRadioButton(), // 单选按钮
              const ProAlertClassic(title: "Title") // 弹窗组件
            ],
          ),
        ),
      ),
    );
  }
}