Flutter可重用组件插件reusable_widgets_flutter的使用

Flutter可重用组件插件reusable_widgets_flutter的使用

该插件是一个包含多个已经设计和开发的widget集合，旨在帮助简化Flutter应用程序的开发过程。通过使用此包中的widget，可以提高开发效率，节省时间和成本。因此，开发者可以更专注于开发应用中更复杂的功能，并提高应用的整体质量。

安装

在pubspec.yaml文件中添加以下代码：

dependencies:
  reusable_widgets_flutter:
    git:
      url: https://github.com/ajianaz/reusable_widgets_flutter.git

使用示例

以下是一个简单的登录页面的示例，展示了如何使用reusable_widgets_flutter插件中的组件。

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:reusable_widgets_flutter/button/CButton.dart';
import 'package:reusable_widgets_flutter/button/CButtonStyle.dart';
import 'package:reusable_widgets_flutter/styles/colors.dart';
import 'package:reusable_widgets_flutter/text/CText.dart';
import 'package:reusable_widgets_flutter/text/CTextStyle.dart';
import 'package:reusable_widgets_flutter/text_field/CTextField.dart';

import '../../../styles/styles.dart';
import '../controllers/login_controller.dart';

class LoginView extends GetView<LoginController> {
  const LoginView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: Get.width,
        height: Get.height,
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: FractionalOffset(0.5, 0.0),
            end: FractionalOffset(0.0, 1.0),
            colors: [colorSecondary, colorPrimary, colorThird]
          )
        ),
        child: Form(
          key: controller.formKey,
          child: Column(
            children: [
              Expanded(
                  flex: 0,
                  child: Container(
                    child: Image.asset(
                      "assets/images/img_logo_white.png",
                      height: 350,
                    )
                  )
              ),
              Expanded(
                  flex: 1,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      CText(
                        "Masuk atau Daftar",
                        style: CTextStyle.head(color: Colors.white),
                      ),
                      SizedBox(height: 20),
                      CTextField(
                        controller: controller.phoneController,
                        hintText: "Nomer Telepon",
                        textInputAction: TextInputAction.done,
                        keyboardType: TextInputType.phone,
                        validator: (value) {
                          if (GetUtils.isBlank(value) == true)
                            return "Tidak boleh kosong";
                          if (GetUtils.isPhoneNumber(value ?? "0") == false)
                            return "Nomer Telp Tidak Valid";
                          return null;
                        },
                      ),
                    ],
                  )
              ),
              Expanded(
                  flex: 0,
                  child: CButton(
                    () {
                      if (!controller.formKey.currentState!.validate()) return;
                      controller.login();
                    },
                    "Selanjutnya",
                    textColor: colorPrimary,
                    textStyle: CTextStyle.bodySemiBold(color: colorPrimary),
                    buttonStyle: CButtonStyle.filled(
                      height: 46,
                      background: Colors.white,
                      radius: 5
                    ),
                  )
              )
            ],
          ),
        ),
      ),
    );
  }
}

感谢

该插件使用了以下库：

贡献

欢迎贡献！

反馈

如果您有任何反馈，请联系我们。


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

1 回复

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


reusable_widgets_flutter 是一个 Flutter 插件，旨在提供一组可重用的组件，以帮助开发者更高效地构建用户界面。这个插件通常包含一些常用的 UI 组件，如按钮、卡片、对话框、表单元素等，这些组件可以直接在项目中使用，减少了重复代码的编写。

安装 reusable_widgets_flutter

首先，你需要在 pubspec.yaml 文件中添加 reusable_widgets_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  reusable_widgets_flutter: ^latest_version

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

使用 reusable_widgets_flutter 组件

安装完成后，你可以在你的 Flutter 项目中导入并使用 reusable_widgets_flutter 提供的组件。以下是一些常见的使用示例：

1. 使用可重用按钮

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Reusable Widgets Example'),
      ),
      body: Center(
        child: ReusableButton(
          onPressed: () {
            print('Button Pressed!');
          },
          text: 'Click Me',
        ),
      ),
    );
  }
}

2. 使用可重用卡片

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Reusable Widgets Example'),
      ),
      body: Center(
        child: ReusableCard(
          child: Text('This is a reusable card.'),
        ),
      ),
    );
  }
}

3. 使用可重用对话框

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Reusable Widgets Example'),
      ),
      body: Center(
        child: ReusableButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) => ReusableDialog(
                title: 'Alert',
                content: 'This is a reusable dialog.',
                actions: [
                  ReusableButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    text: 'OK',
                  ),
                ],
              ),
            );
          },
          text: 'Show Dialog',
        ),
      ),
    );
  }
}
回到顶部