reactive_raw_autocomplete 2.0.1

Wrapper around RawAutocomplete to use with reactive_forms

example/lib/main.dart

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

class TestGroup {
  final int id;
  final String name;
  final String description;
  const TestGroup({
    required this.id,
    required this.name,
    required this.description,
  });
}

class FormClass {
  static final form = fb.group({
    'group': fb.control<int>(1),
  });
}

class TestGroupValueAccessor extends ControlValueAccessor<int, TestGroup> {
  TestGroupValueAccessor();
  @override
  TestGroup? modelToViewValue(int? modelValue) {
    return [
      const TestGroup(
          id: 1, name: 'Perekani Group', description: 'Obnoxious Group'),
      const TestGroup(
          id: 2, name: 'Talandira Group', description: 'Obnoxious Group'),
      const TestGroup(
          id: 3, name: 'Tamandani Group', description: 'Obnoxious Group')
    ].firstWhere((element) => element.id == modelValue);
  }

  @override
  int? viewToModelValue(TestGroup? viewValue) {
    return viewValue?.id;
  }
}

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: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ReactiveForm(
          formGroup: FormClass.form,
          child: ReactiveRawAutocomplete<int, TestGroup>(
            displayStringForOption: (option) => option.name,
            valueAccessor: TestGroupValueAccessor(),
            optionsBuilder: (TextEditingValue textEditingValue) {
              return [
                const TestGroup(
                    id: 1,
                    name: 'Perekani Group',
                    description: 'Obnoxious Group'),
                const TestGroup(
                    id: 2,
                    name: 'Talandira Group',
                    description: 'Obnoxious Group'),
                const TestGroup(
                    id: 3,
                    name: 'Tamandani Group',
                    description: 'Obnoxious Group')
              ]
                  .where((group) => group.name
                  .toLowerCase()
                  .contains(textEditingValue.text.toLowerCase()))
                  .toList();
            },
            optionsViewBuilder: (context, onSelected, options) {
              return Material(
                elevation: 4.0,
                child: ListView.separated(
                  padding: EdgeInsets.zero,
                  itemCount: options.length,
                  itemBuilder: (BuildContext context, int index) {
                    final group = options.elementAt(index);
                    return ListTile(
                      title: Text(group.name),
                      onTap: () {
                        onSelected(group);
                      },
                    );
                  },
                  separatorBuilder: (BuildContext context, int index) =>
                  const Divider(),
                ),
              );
            },
            formControlName: 'group',
            decoration: const InputDecoration(
              labelText: 'Group',
              border: OutlineInputBorder(),
            ),
            style: const TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.normal,
            ),
          ),
        ),
      ),
    );
  }
}