reactive_phone_form_field 0.8.0

Wrapper around phone_form_field to use with reactive_forms

example/lib/main.dart

// import 'package:flutter/material.dart';
// import 'package:reactive_forms/reactive_forms.dart';
// import 'package:reactive_phone_form_field/reactive_phone_form_field.dart';
//
// void main() {
//   runApp(const MyApp());
// }
//
// class MyApp extends StatelessWidget {
//   const MyApp({Key? key}) : super(key: key);
//
//   FormGroup buildForm() => fb.group({
//         'input': FormControl<PhoneNumber>(
//           value: const PhoneNumber(
//             isoCode: IsoCode.UA,
//             nsn: '933456789',
//           ),
//         ),
//       });
//
//   // This widget is the root of your application.
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       title: 'Flutter Demo',
//       theme: ThemeData(
//         primarySwatch: Colors.blue,
//         visualDensity: VisualDensity.adaptivePlatformDensity,
//       ),
//       home: Scaffold(
//         appBar: AppBar(),
//         body: SafeArea(
//           child: SingleChildScrollView(
//             physics: const BouncingScrollPhysics(),
//             padding: const EdgeInsets.symmetric(
//               horizontal: 20.0,
//               vertical: 20.0,
//             ),
//             child: ReactiveFormBuilder(
//               form: buildForm,
//               builder: (context, form, child) {
//                 return Column(
//                   children: [
//                     ReactivePhoneFormField<PhoneNumber>(
//                       formControlName: 'input',
//                       focusNode: FocusNode(),
//                     ),
//                     const SizedBox(height: 16),
//                     ElevatedButton(
//                       child: const Text('Sign Up'),
//                       onPressed: () {
//                         if (form.valid) {
//                           // ignore: avoid_print
//                           print(form.value);
//                         } else {
//                           form.markAllAsTouched();
//                         }
//                       },
//                     ),
//                   ],
//                 );
//               },
//             ),
//           ),
//         ),
//       ),
//     );
//   }
// }

import 'package:flutter/material.dart';
import 'package:reactive_forms/reactive_forms.dart';
import 'package:reactive_phone_form_field/reactive_phone_form_field.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  FormGroup _formGroup() => FormGroup(
    {
      'phone': FormControl<PhoneNumber>(),
    },
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Builder(
            builder: (context1) {
              return TextButton(
                onPressed: () {
                  showDialog<void>(
                    context: context1,
                    builder: (context2) => AlertDialog(
                      title: const Text('AlertDialog'),
                      content: ReactiveFormBuilder(
                        form: _formGroup,
                        builder: (context, form, child) {
                          return Column(
                            children: [
                              ReactivePhoneFormField<PhoneNumber>(
                                formControlName: 'phone',
                              ),
                              PhoneFormField(),
                            ],
                          );
                        },
                      ),
                      actions: <Widget>[
                        TextButton(
                          child: const Text('OK'),
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                        ),
                      ],
                    ),
                  );
                },
                child: const Text('Show AlertDialog'),
              );
            }
        ),
      ),
    );
  }
}