Issue
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(),
),
],
),
);
Solution
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(),
);
}
}
Answered By – Vadim Popov
Answer Checked By – David Marino (FlutterFixes Volunteer)