Flutter UI组件插件az

Flutter UI组件插件az_ui的使用

此包旨在加快UI开发过程。

开始使用

你可以通过将一些小部件更改为Az小部件来开始使用。

方式一：直接调用

直接调用我们的小部件：

Text() 变为 AzText()
Button() 变为 AzButton()
等等

方式二：扩展方法

在现有项目中使用扩展方法：

Text().azText()
Button().azButton()
等等

AzContainer

调用扩展方法 AzText() 来显示边框：

AzText('Text')
.toContainer()
.borderColor(Colors.pink)
.primaryBorder()
.borderWidth(1)
.borderFromLTRB(bool left, bool top, bool right, bool bottom), // 在调用此方法前更改边框属性

AzButton

简单的调用示例：

AzButton('Text')
.wFull()
.primaryOutline()
.onPressed(() {
    print('On Pressed call this');
}),

颜色组

这些是在特定小部件上实现的颜色组：

primary, secondary, success, info, warning, danger, dark, light

调用方式如下：
primaryColor,
primaryBorder,
primaryCard,
primaryBg

额外信息

目前实现了常用的部件和属性。

使用十六进制颜色代码

现在你可以使用 fromHex() 扩展方法来查看十六进制颜色代码的输出：

'#E1E1E1'.fromHex()

带十六进制代码示例：
AzText("Color").color('#000000'.fromHex())

不带十六进制代码示例：
AzText("Color").color(Colors.black)

响应式屏幕

你可以通过以下方法使你的屏幕具有响应性。这将把你的小部件转换为 SizedBox。响应式单词 col 来自Bootstrap CSS包。

// 示例 1
AzText('Text').toResponsive().sm1(context).md1(context).lg2(context).xl1(context)

// 示例 2 使用单个方法
AzText('Text').toResponsive().col('col-sm-1 col-md-1 col-lg-2 col-xl-1')

导航到屏幕

你可以这样导航到新屏幕：

// 跳转到新屏幕
AzNavigate(context).to(
    screen: HomeScreen(),
    direction:'up'
);

// 返回到上一个屏幕
AzNavigate(context).back()

完整示例代码

import 'package:example/screens/ColumnScreen.dart';
import 'package:example/screens/IconScreen.dart';
import 'package:example/screens/ImageScreen.dart';
import 'package:example/screens/RowScreen.dart';
import 'package:example/screens/TextScreen.dart';
import 'package:example/widgets/button.dart';
import 'package:example/widgets/container.dart';
import 'package:example/widgets/list_tile.dart';
import 'package:example/widgets/navigate.dart';
import 'package:example/widgets/text.dart';
import 'package:example/widgets/text_form_filed.dart';
import '../helper/extensions.dart';
import 'package:example/widgets/wrap.dart';
import 'package:flutter/material.dart';

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

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

  // 此小部件是您的应用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Container(
              height: 50,
              foregroundDecoration: BoxDecoration(
                color: Colors.red,
              ),
            ).azContainer(),

            const Text('Ink well button text',
              overflow: TextOverflow.ellipsis,
              textScaleFactor: 2,
              maxLines: 2,
            )
              .azText()
              .fs(15)
              .color(Colors.green)
              .toContainer().p(50)
              .toInkWell().borderRadius(10).onTap(() {
                print('asd');
            }),

            // 响应式将在AzWarp/Wrap内部获得更好的效果
            AzWrap([
              // 示例 1
              AzText('Responsive Text').toContainer().wFull().dangerSolidThree().toResponsive().sm1(context),

              // 示例 2
              AzText('Responsive Text').toContainer().wFull().primarySolidThree().toResponsive().col('col-5'),
            ]),

            // 示例 3
            AzTextFormField().borderSecondary(),

            // 示例 4
            AzButton('Button')
            .wFull()
            .primarySolidTwo()
            .radius(5)
            .onPressed(() {
              print(1);
            }),

            AzText("Widget of AzPackage/Flutter").fs(20).bold().toContainer().pLTRB(10.0, 10.0, 10.0, 0.0),

            AzText("At the moment you will find the commonly used things in this package as well as some supporting pre defined methos to make work smooth &amp; easier")
                .toContainer().p(10.0),

            Divider(height:0),

            AzText("Done").fs(16).color(Colors.green).toCenter().toContainer().px(10.0).py(10),

            Divider(height:0),

            AzListTile(AzText("AzText/Text").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: TextScreen(title: 'AzListTile(AzText/Text')
              );
            }),

            Divider(height:0),

            AzListTile(AzText("AzIcon/Icon").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: IconScreen(title: 'AzIcon/Icon')
              );
            }),

            Divider(height:0),

            AzListTile(AzText("AzColumn/Column").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: ColumnScreen(title: 'AzColumn/Column')
              );
            }),

            Divider(height:0),

            AzListTile(AzText("AzRow/Row").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: RowScreen(title: 'AzRow/Row')
              );
            }),

            Divider(height:0),

            AzListTile(AzText("AzImage").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: ImageScreen(title: 'AzImage')
              );
            }),

            Divider(height:0),

            AzText("Not Done").fs(16).color(Colors.red).toCenter().toContainer().px(10.0).py(10),

            Divider(height:0),

            AzListTile(AzText("AzTextFormFiled/TextFormFiled").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: TextScreen(title: 'AzListTile(AzText/Text')
              );
            }),

            Divider(height:0),

            AzListTile(AzText("AzButton/Button").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: TextScreen(title: 'AzListTile(AzText/Text')
              );
            }),

            Divider(height:0),

            AzListTile(AzText("AzWrap/Wrap").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: TextScreen(title: 'AzListTile(AzText/Text')
              );
            }),

            Divider(height:0),

            AzListTile(AzText("AzStack/Stack").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: TextScreen(title: 'AzListTile(AzText/Text')
              );
            }),

            Divider(height:0),

            AzListTile(AzText("AzPositioned/Positioned").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: TextScreen(title: 'AzListTile(AzText/Text')
              );
            }),

            Divider(height:0),

            AzListTile(AzText("AzListTile/ListTile").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: TextScreen(title: 'AzListTile(AzText/Text')
              );
            }),

            Divider(height:0),

            AzListTile(AzText("AzRadioTile/RadioTile").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: TextScreen(title: 'AzListTile(AzText/Text')
              );
            }),

            Divider(height:0),

            AzListTile(AzText("AzDropDown/Dropdown").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: TextScreen(title: 'AzListTile(AzText/Text')
              );
            }),

            Divider(height:0),

            AzListTile(AzText("AzGestureDetector/GestureDetector").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: TextScreen(title: 'AzListTile(AzText/Text')
              );
            }),

            Divider(height:0),

            AzListTile(AzText("AzInkWell/InkWell").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: TextScreen(title: 'AzListTile(AzText/Text')
              );
            }),

            Divider(height:0),

            AzListTile(AzText("AzGridView/GridView").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: TextScreen(title: 'AzListTile(AzText/Text')
              );
            }),

            Divider(height:0),

            AzListTile(AzText("AzListView/ListView").fs(16)).onTap(() {
              AzNavigate(context).to(
                  screen: TextScreen(title: 'AzListTile(AzText/Text')
              );
            }),
          ],
        ).azColumn().mainCenter(),
      )
    );
  }
}

代码片段

codeSnippet(String code){
  return AzText(code).fs(14).toContainer().cardV1(Colors.white).wFull().p(10);
}

codeSnippetOutput(Widget widget){
  return Container(child: widget,)
      .azContainer()
      .cardV1(Colors.white)
      .bg(Colors.black12.withOpacity(0.01))
      .wFull()
      .p(10);
}

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

zlyuanteng 1楼

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

当然，以下是一个关于如何在Flutter项目中使用az_ui插件的示例代码。az_ui是一个假定的Flutter UI组件插件，因此具体的API和功能可能会有所不同，但我会根据常见的UI插件使用方式来编写一个示例。

首先，确保你已经在pubspec.yaml文件中添加了az_ui插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  az_ui: ^x.y.z  # 替换为实际的版本号

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

接下来，我们来看一下如何在Flutter应用中使用az_ui插件。假设az_ui提供了一个AzButton组件，我们可以像下面这样使用它：

import 'package:flutter/material.dart';
import 'package:az_ui/az_ui.dart';  // 导入az_ui插件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AzUI Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AzUIDemoPage(),
    );
  }
}

class AzUIDemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AzUI Demo Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用AzButton组件
            AzButton(
              onPressed: () {
                // 按钮点击事件处理
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Button clicked!')),
                );
              },
              child: Text('Click Me'),
              color: Colors.blue,
              textColor: Colors.white,
            ),
            // 可以添加更多az_ui提供的组件
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

在pubspec.yaml中添加了az_ui插件的依赖。
在MyApp类中创建了一个MaterialApp，并设置了主页面为AzUIDemoPage。
在AzUIDemoPage中，使用Scaffold组件构建了一个简单的页面，并在页面的中心添加了一个AzButton组件。
为AzButton组件的onPressed属性设置了一个点击事件处理函数，当按钮被点击时，会显示一个SnackBar提示。

请注意，由于az_ui是一个假定的插件，因此上述代码中的AzButton组件及其属性（如color和textColor）是假设存在的。实际使用时，你应该参考az_ui插件的官方文档来了解其提供的组件和API。

此外，如果az_ui插件有特定的主题配置或初始化步骤，你可能还需要在应用的入口文件（如main.dart）中进行相应的配置。这些配置通常会在插件的官方文档中有详细说明。