Flutter LyForm

Flutter package to implement forms in an easy, fast, and effective way using the lyform and flutter_bloc packages.

Sponsored with 💖 by

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Tony Raul Blanco Fernandez 💻 🚧	Leynier Gutiérrez González 💻 📖	Leonel 💻 🐛	Carlos Bermudez Porto 💻	Yeikel Uriarte Arteaga 💻 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!

使用示例

示例代码

以下是一个简单的示例，展示了如何使用 flutter_lyform 插件来创建一个表单页面。

1. 添加依赖

在你的 pubspec.yaml 文件中添加 flutter_lyform 和 flutter_bloc 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_lyform: ^1.0.0
  flutter_bloc: ^8.0.0

2. 创建 Bloc 观察者

创建一个 bloc_observer.dart 文件，用于观察 Bloc 的状态变化：

import 'package:flutter_bloc/flutter_bloc.dart';

class AppBlocObserver extends BlocObserver {
  @override
  void onEvent(Bloc bloc, Object? event) {
    super.onEvent(bloc, event);
    print(event);
  }

  @override
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);
    print(change);
  }

  @override
  void onError(BlocBase bloc, Object error, StackTrace stackTrace) {
    print(error);
    super.onError(bloc, error, stackTrace);
  }
}

3. 创建主应用

创建一个 main.dart 文件，作为应用的入口点：

import 'package:example/bloc_observer.dart';
import 'package:example/profile_form/profile_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() {
  Bloc.observer = AppBlocObserver();
  runApp(const App());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ProfilePage(),
    );
  }
}

4. 创建表单页面

创建一个 profile_page.dart 文件，用于展示表单页面：

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

class ProfilePage extends StatefulWidget {
  const ProfilePage({Key? key}) : super(key: key);

  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profile Form'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              LyTextField(
                label: 'Name',
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your name';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 16.0),
              LyTextField(
                label: 'Email',
                keyboardType: TextInputType.emailAddress,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your email';
                  }
                  if (!RegExp(r'^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$').hasMatch(value)) {
                    return 'Please enter a valid email address';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 16.0),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // 表单验证通过，可以提交表单数据
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('Form submitted successfully!')),
                    );
                  }
                },
                child: const Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

运行应用

1. 确保你已经安装了 Flutter 和 Dart。
2. 在终端中运行 flutter pub get 命令来获取依赖。
3. 运行 flutter run 命令启动应用。

以上就是一个使用 flutter_lyform 插件创建表单的基本示例。希望对你有所帮助！如果有任何问题或建议，欢迎随时提出。