How to add a searcher bar that creates new containers -Flutter

Question

How to add a search option, thanks to which, after clicking it will add a new container, currently the code after clicking creates a new container at the bottom, but I also need a increase this options and add search option.

In that case, do I have to combine the click and search options to create a new container?

I am new in flutter and any help will be valuable.

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

 @override
  _ProfileView3State createState() => _ProfileView3State();

 static Route<void> route() {
    return MaterialPageRoute<void>(builder: (_) => ProfileView3());
 }
}

 class _ProfileView3State extends State<ProfileView3> {
  Widget _profilePage(BuildContext context) {
    return SafeArea(
       child: Center(
        child: Column(
        children: [
        _Text_2(),
        _buildValues(),
        _Text_4(),
        _buildPickeds()
      ],
    ),
  ),
);
// });
 }


 List<String> values = [
'Lion',
'Tiger',
'Flaming',
];

 List<String> pickedValues = [];

   Widget _buildValues() {
   return Container(
  padding: EdgeInsets.all(16.0),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Wrap(
        spacing: 8.0,
        // line interval
        runSpacing: 8.0,
        children: values
            .map(
              (value) => GestureDetector(
            onTap: () {
              if (pickedValues.contains(value)) {
                //delete when click part of value
                //
                // pickedValues.remove(value);
              } else {
                pickedValues.add(value);
              }
              setState(() {});
            },
            child: Container(
              decoration: const BoxDecoration(
                  color: Colors.deepPurpleAccent,
                  borderRadius: BorderRadius.all(Radius.circular(5.0))),
              padding: const EdgeInsets.symmetric(
                horizontal: 10,
                vertical: 10,
              ),
              child: Text(
                value,
                style: TextStyle(color: Colors.white),
                // fontWeight: FontWeight.bold
              ),
            ),
          ),
        )
            .toList(),
      ),
    ],
  ),
);
}

Widget _buildPickeds() {
return Container(
  padding: EdgeInsets.all(16.0),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Wrap(
        spacing: 8.0,
        // line interval
        runSpacing: 8.0,
        children: pickedValues
            .map(
              (value) => GestureDetector(
            onTap: () {
              if (pickedValues.contains(value)) {
                pickedValues.remove(value);
              } else {
                pickedValues.add(value);
              }
              setState(() {});
            },
            child: Container(
                decoration: BoxDecoration(
                    color: Colors.black26,
                    border: Border.all(
                        color: Colors.purpleAccent, // set border color
                        width: 1.5),
                    borderRadius: BorderRadius.all(Radius.circular(5.0))),
                padding: const EdgeInsets.symmetric(
                  horizontal: 5,
                  vertical: 5,
                ),
                child: RichText(
                  text: TextSpan(
                    style: Theme.of(context).textTheme.body1,
                    children: [
                      const WidgetSpan(
                        child: Padding(
                          padding: EdgeInsets.symmetric(horizontal: 2.0),
                          child: Icon(Icons.check),
                        ),
                      ),
                      TextSpan(text: value),
                      const WidgetSpan(
                        child: Padding(
                          padding: EdgeInsets.symmetric(horizontal: 2.0),
                          child: Icon(Icons.close),
                        ),
                      ),
                    ],
                  ),
                )
            ),
          ),
        )
            .toList(),
      ),
    ],
  ),
);

Answer 1

Here is the example.

import 'package:flutter/material.dart';

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

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

class _SearchPageState extends State<SearchPage> {
  List<String> values = [
    'Hello',
    'Hello2',
    'Hello3',
  ];

  List<String> pickedValues = [];

  TextEditingController controller;

  @override
  void initState() {
    super.initState();
    controller = TextEditingController();
  }

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 300,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              _buildValues(),
              const SizedBox(
                height: 30,
              ),
              _buildSearchBar(),
              const SizedBox(
                height: 30,
              ),
              _buildPickedValues(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildValues() {
    return Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: values
          .map(
            (value) => Container(
              padding: const EdgeInsets.symmetric(
                horizontal: 10,
                vertical: 10,
              ),
              color: Colors.blueGrey,
              child: Text(
                value,
              ),
            ),
          )
          .toList(),
    );
  }

  Widget _buildSearchBar() {
    return TextFormField(
      controller: controller,
      onFieldSubmitted: search,
      decoration: InputDecoration(
        hintText: 'Search',
        fillColor: Colors.white,
        filled: true,
        isDense: true,
        suffixIcon: GestureDetector(
          onTap: () {
            search(controller.text);
          },
          child: const Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 10,
              vertical: 10,
            ),
            child: Icon(
              Icons.search,
              size: 30,
            ),
          ),
        ),
        focusedBorder: const OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(5),
          ),
          borderSide: BorderSide(
            width: 1,
            color: Colors.blueAccent,
          ),
        ),
        disabledBorder: InputBorder.none,
        border: InputBorder.none,
        enabledBorder: const OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(5),
          ),
          borderSide: BorderSide(
            width: 1,
            color: Colors.grey,
          ),
        ),
        errorBorder: const OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(5),
          ),
          borderSide: BorderSide(
            width: 1,
            color: Colors.red,
          ),
        ),
      ),
    );
  }

  void search(String query) {
    final _formatQuery = query.toLowerCase();
    final _formatPickedValues = pickedValues
        .map(
          (e) => e.toLowerCase(),
        )
        .toList();
    final _formatValues = values
        .map(
          (e) => e.toLowerCase(),
        )
        .toList();
    if (!_formatPickedValues.contains(_formatQuery) &&
        _formatValues.contains(_formatQuery)) {
      pickedValues.add(query);
    }
    setState(() {});
  }

  Widget _buildPickedValues() {
    return Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: pickedValues
          .map(
            (value) => GestureDetector(
              onTap: () {
                pickedValues.remove(value);
                setState(() {});
              },
              child: Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 10,
                  vertical: 10,
                ),
                color: Colors.blueAccent,
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      value,
                    ),
                    const SizedBox(
                      width: 4,
                    ),
                    const Icon(
                      Icons.close,
                      size: 20,
                    ),
                  ],
                ),
              ),
            ),
          )
          .toList(),
    );
  }
}