fl_form 0.5.0

FormField Flutter for Text, Date, Time, Date&Time, Boolean, Avatar, Item Picker, Radio Button, Checkbox group.

example/lib/main.dart

import 'package:example/main_example.dart';
import 'package:flutter/material.dart';

import 'package:fl_form/formfield/fl_form_field_theme.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final radius = 2.0;
    return Center(
      child: MediaQuery(
          data: MediaQuery.of(context).copyWith(
            size: Size(
              MediaQuery.of(context).size.width / 2,
              MediaQuery.of(context).size.height,
            ),
          ),
          child: Builder(
            builder: (context) {
              return MaterialApp(
                title: 'Flutter Demo',
                theme: ThemeData.dark(
                  useMaterial3: true,
                ).copyWith(
                  textSelectionTheme:
                      TextSelectionThemeData(cursorColor: Colors.white),
                  extensions: [
                    FlFormFieldTheme(
                      fillColorDisable: Colors.black,
                      style: const TextStyle(fontSize: 16, color: Colors.white),
                      disableStyle:
                          const TextStyle(fontSize: 16, color: Colors.white),
                      errorStyle:
                          const TextStyle(fontSize: 12, color: Colors.red),
                      placeHolderStyle: const TextStyle(
                          fontSize: 16,
                          color: Colors.white24,
                          fontWeight: FontWeight.w300),
                      labelStyle:
                          const TextStyle(fontSize: 12, color: Colors.white70),
                      inputDecorationTheme: InputDecorationTheme(
                        hintStyle: const TextStyle(
                            fontSize: 16,
                            color: Colors.white24,
                            fontWeight: FontWeight.w300),
                        contentPadding: const EdgeInsets.symmetric(
                            vertical: 12, horizontal: 16),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(radius),
                          borderSide: Divider.createBorderSide(context,
                              color: Colors.white30, width: 0),
                        ),
                        errorBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(radius),
                            borderSide: Divider.createBorderSide(context,
                                color: Colors.red)),
                        focusedErrorBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(radius),
                            borderSide: Divider.createBorderSide(context,
                                color: Colors.red)),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(radius),
                          borderSide: Divider.createBorderSide(context,
                              color: Colors.white70, width: 0),
                        ),
                        focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(radius),
                            borderSide: Divider.createBorderSide(context,
                                width: 0, color: Colors.blue)),
                        outlineBorder:
                            Divider.createBorderSide(context, width: 0),
                        activeIndicatorBorder:
                            Divider.createBorderSide(context, width: 0),
                      ),
                    ),
                  ],
                ),
                home: const MainExample(),
              );
            },
          )),
    );
  }
}