Flutter AutoCompleteTextfield layout

Question

Greetings to all fellow members!

I am looking forward to implementing the following layout in flutter as per my client's requirement.

Furthermore, it also needs to be AutoCompleteTextField. I am currently using flutter's autocomplete_textfield library but I am unable to achieve layout as mentioned in the image instead it displays a normal list as suggetions. I need it with checkbox.

If someone could help me on this or point me to the right direction please.

Thanks

Answer 1

Final Output:

Here is an example of how you can implement this feature:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 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: MyHomePage(
        title: "Country List Example",
      ),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List fullTaskDetailsList = [];
  List taskDetailsList = [];
  TextEditingController mycontroller = TextEditingController();
  List checkedFlag = List.filled(countryList.length, false);
  void searchMethodWithTest(String text) {
    List result = [];
    print("Text: " + text.length.toString());
    if (mycontroller.text.isNotEmpty) {
      fullTaskDetailsList.forEach((element) {
        text = text.trim();
        if (element["name"].toLowerCase().contains(text)) {
          result.add(element);
        }
      });
      print(taskDetailsList.toString());
      setState(() {
        taskDetailsList = result;
      });
      return;
    } else {
      setState(() {
        taskDetailsList = fullTaskDetailsList;
      });
      return;
    }
  }

  @override
  void initState() {
    fullTaskDetailsList = countryList;
    taskDetailsList = fullTaskDetailsList;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: [
              TextField(
                controller: mycontroller,
                onChanged: (value) {
                  searchMethodWithTest(mycontroller.text.toLowerCase());
                },
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(10),
                  hintText: "Search For Countries",
                ),
              ),
              Text("Searched for: ${mycontroller.text}"),
              Container(
                width: double.infinity,
                height: 400.0,
                child: ListView.builder(
                    itemCount: taskDetailsList.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        leading: Checkbox(
                            value: taskDetailsList[index]["checked"],
                            onChanged: (value) {
                              String name = taskDetailsList[index]["name"];
                              List temp = [];
                              fullTaskDetailsList.forEach((element) {
                                if (element["name"] == name) {
                                  print("hello");
                                  temp.add({
                                    "name": name,
                                    "checked": !element["checked"]
                                  });
                                } else {
                                  temp.add(element);
                                }
                              });
                              setState(() {
                                fullTaskDetailsList = temp;
                              });
                              searchMethodWithTest(mycontroller.text.toLowerCase());
                            }),
                        title: Text(
                          taskDetailsList[index]["name"],
                          style: TextStyle(
                            fontSize: 20.0,
                          ),
                        ),
                      );
                    }),
              )
            ],
          ),
        ),
      ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

const countryList = [
  {"name": "Afghanistan", "checked": true},
  {"name": "Albania", "checked": false},
  {"name": "Algeria", "checked": false},
  {"name": "American Samoa", "checked": false},
  {"name": "Andorra", "checked": false},
  {"name": "Angola", "checked": false},
  {"name": "Anguilla", "checked": false},
  {"name": "Antarctica", "checked": false},
  {"name": "Antigua and Barbuda", "checked": false},
  {"name": "Argentina", "checked": false},
  {"name": "Armenia", "checked": false}
];

Note: I used TextField instead of AutoCompleteTextField but underlying logic should not change much.