I want to have UI like this:
With native Android it can be done with libraries like https://github.com/whilu/AndroidTagView, how can it be done with flutter?
you can make the same UI by combining the Wrap and Chip widget as #wasyl montioned . but this is a full example about what you need
Notes :
you can adjust the space between the chips inside the Wrap widget
using spacing
the deleteIcon is only in the right but you can use the avatar to show an icon in the left
you can set the Chip Border Color and width using the Shape property
new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Wrap(
children: <Widget>[
Chip(
label: new Text("Java"),
onDeleted: () {},
labelPadding: EdgeInsets.all(2.0),
deleteIcon: Icon(Icons.clear),
),
Chip(
label: new Text("C++"),
onDeleted: () {},
labelPadding: EdgeInsets.all(2.0),
deleteIcon: Icon(Icons.clear),
),
Chip(
label: new Text("Python"),
onDeleted: () {},
labelPadding: EdgeInsets.all(2.0),
deleteIcon: Icon(Icons.clear),
),
],
),
new SizedBox(
height: 10.0,
),
new Wrap(
spacing: 5.0,
children: <Widget>[
Chip(
label: new Text("China"),
backgroundColor: Colors.pinkAccent,
),
Chip(
label: new Text("USA"),
backgroundColor: Colors.greenAccent,
),
Chip(
label: new Text("Austria"),
backgroundColor: Colors.purpleAccent,
),
],
),
new SizedBox(
height: 10.0,
),
new Wrap(
textDirection: TextDirection.rtl,
spacing: 5.0,
children: <Widget>[
Chip(
label: new Text("نجربة"),
avatar: Icon(Icons.clear),
backgroundColor: Colors.transparent,
shape: new BeveledRectangleBorder(side: BorderSide(color: Colors.grey))),
Chip(
label: new Text("كتابة"),
avatar: Icon(Icons.clear),
backgroundColor: Colors.transparent,
shape: new BeveledRectangleBorder(side: BorderSide(color: Colors.grey))),
Chip(
label: new Text("مختلفة"),
avatar: Icon(Icons.clear),
backgroundColor: Colors.transparent,
shape: new BeveledRectangleBorder(side: BorderSide(color: Colors.grey))),
],
),
],
),
You will want to use:
a Wrap widget to have your chips (tags) be positioned one by one, overflowing to the next row
a Chip widget for a material-design chip with text, optional delete button, delete callback etc.
Seems like the border width can't be easily set for a Chip, though, but the overall functionality is readily available
Related
Is there a way to add a title box to a card in the Flutter Material design? So far I've got to:
Card(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
side: BorderSide(color: Colors.black)
),
child: ...
)
But I can't figure out how to add the title decoration. Is there a way? The picture below is roughly what I'm trying to achieve.
In material design the title of a card wouldn't float over the border, as your picture - although it is possible to make, as we see in textFormField decoration.
Below a code of Material 2 for building a card. You can find other examples and how to theme your card in the link: https://material.io/components/cards/flutter#card
Card(
clipBehavior: Clip.antiAlias,
child: Column(
children: [
ListTile(
leading: Icon(Icons.arrow_drop_down_circle),
title: const Text('Card title 1'),
subtitle: Text(
'Secondary Text',
style: TextStyle(color: Colors.black.withOpacity(0.6)),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'Greyhound divisively hello coldly wonderfully marginally far upon excluding.',
style: TextStyle(color: Colors.black.withOpacity(0.6)),
),
),
ButtonBar(
alignment: MainAxisAlignment.start,
children: [
FlatButton(
textColor: const Color(0xFF6200EE),
onPressed: () {
// Perform some action
},
child: const Text('ACTION 1'),
),
FlatButton(
textColor: const Color(0xFF6200EE),
onPressed: () {
// Perform some action
},
child: const Text('ACTION 2'),
),
],
),
Image.asset('assets/card-sample-image.jpg'),
Image.asset('assets/card-sample-image-2.jpg'),
],
),
),
What I wanted to achieve is that the size of the elevated button should fill the entire space. in my case if you look at the picture attached i want "user experience" and "engineering" fill the empty space in blue and in the same time aligned from left and right
I am trying to make the buttons size dynamic inside the warp widget, her my code below
Wrap(
spacing: 10,
alignment: WrapAlignment.spaceBetween,
children: [
for (InterestsClass item in interests)
InterestsButton(
text: item.interestsName,
)
],
),
InterestsButton is just an elevated button that is reusable, but if I add expanded as show below its Incorrect use of ParentDataWidget, since there is no flex parent
Widget build(BuildContext context) {
return Expanded(
child: ElevatedButton(
onPressed: () {
setState(() {
_flag = !_flag;
});
},
child: Text(
widget.text,
style: TextStyle(color: _flag ? kWhite : k34, fontSize: 13),
),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10),
shape: StadiumBorder(),
primary: _flag ? kBlue : Color(0xffFAFAFA)),
),
);
}
I think u can use an alternative way Chip/ ChoiceChip. These widget is available in Flutter very useful for creating size dynamic button with change style when tap.
See more here
https://api.flutter.dev/flutter/material/Chip-class.html
https://medium.com/flutterdevs/chip-widgets-in-flutter-7a2d3d34597c
Result One
I have it working now. Here is the code:
FilterChip(
label: Text("text"),
backgroundColor: Colors.transparent,
shape: StadiumBorder(side: BorderSide()),
onSelected: (bool value) {print("selected");},
),
Result Two
You can achieve it by this way
Chip(
shape: RoundedRectangleBorder(
side: BorderSide(color: colorThird, width: 1),
borderRadius: BorderRadius.circular(10),
),
backgroundColor: colorSecondary,
deleteIcon: Icon(
Icons.close,
color: Colors.white,
size: 15,
),
label: Text(searchController.recentSearchesList[index], style:
TextStyle(color: Colors.white),),
deleteButtonTooltipMessage: 'erase',
onDeleted: () {
print(index);
},
);
Is there an existing speed dial widget that would work with regular buttons or any onclick event? I have found this widget which works great with the FloatingActionButton, but I need something that would work with an IconButton or RaisedButton. I tried using the SpeedDial Widget inside of a container, like so:
Container(
child: SpeedDial(
overlayOpacity: 0.2,
animatedIcon: AnimatedIcons.menu_close,
children: [
SpeedDialChild(
child: Icon(Icons.ac_unit),
label: 'Second',
onTap: () => print('SECOND'),
),
SpeedDialChild(
child: Icon(Icons.accessibility),
backgroundColor: Colors.red,
label: 'First',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => print('FIRST'),
),
],
),
),
But no luck, unfortunately. I get an infinity pixels on the right.
Please use padding in right and bottom side. Check the below code. You need to set a TextStyle for Text, you also need to use manual height and width for your child.
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 20, 20),
child: Container(
child: SpeedDial(
overlayOpacity: 0.2,
animatedIcon: AnimatedIcons.menu_close,
children: [
SpeedDialChild(
child: Icon(Icons.ac_unit),
label: 'Second',
onTap: () => print('SECOND'),
),
SpeedDialChild(
child: Icon(Icons.accessibility),
backgroundColor: Colors.red,
label: 'First',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => print('FIRST'),
),
],
),
),
)
How can I reduce spacing between button ?
You can see four buttons on app bar takes so much space, I have tried Rows. but not worked
Below is my code --
AppBar(
backgroundColor: Colors.deepOrange,
iconTheme: new IconThemeData(color: Colors.white),
title: Text(
titleString,
style: TextStyle(color: Colors.white),
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
//iconSize: 20,
onPressed: null,
),
IconButton(
icon: Icon(
Icons.notifications_none,
color: Colors.white,
),
// iconSize: 20,
onPressed: null,
),
//Add more icon here
],
);
You can use VisualDensity and padding arguments together to reduce things:
actions: <Widget>[
IconButton(
visualDensity: VisualDensity(horizontal: -4.0, vertical: -4.0),
padding: EdgeInsets.zero,
icon: Icon(
Icons.search,
color: Colors.white,
),
//iconSize: 20,
onPressed: null,
),
//Add more icon here
],
This worked in my app at least. Hope it's helpful!
The problem is with the IconButton Widget. by default IconButton has a size of 48x48 pixels size and you can read about it in the top answer of this question.
A workaround would be to use the GestureDetector widget to handle your onPressed() method. Below is an example.
actions: <Widget>[
GestureDetector(
onTap: (){
//your code
},
child: Icon(Icons.search)
),
GestureDetector(
onTap: (){},
child: Icon(Icons.notifications)
)
//Add more icon here
],
Try using sizedbox
Example
Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox.fromSize(
size: Size(25, 20), // button width and height
child: InkWell(
splashColor: Colors.white, // splash color
onTap: () {}, // button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.search), // icon
],
),
),
),
),
I am trying to create a chip where the close button (deleteIcon) is on the left side of the chip label (label).
how can i do that.
here is the unwantted result:
and i want to move the X to the left side of "Hagai"
like this:
Chip(
deleteIcon: Icon( Icons.close, ),
onDeleted: () {setState(() {print("bla");}); }
label: Text("bla",),
),
An update:
after the suggestions answers here is my new code (still dosent work):
Widget build(BuildContext context) {
return Container(
child:
Chip(
label: Text(
"bla",
),
avatar: InkWell(
onTap: () {
print("bla");
},
child: Icon(
Icons.close,
),
),
),
);
}
There is no way to change the direction of Chip Widget. But we can customize the Chip
Chip(
label: Text(
"bla",
),
avatar: InkWell(
onTap: () {},
child: Icon(
Icons.close,
),
),
),
another solution is given by ibhavikmakwana
Additions
as in the above view are visible the same as per requirement but onTap is not working I am working on finding the reason why it's not working.
I have created the custom chip View, for mean while you can use it its working fine
Wrap(
children: <Widget>[
Container(
padding: const EdgeInsets.fromLTRB(5.0, 5.0, 5.0, 5.0),
decoration: BoxDecoration(
color: Color(0xffDBDBDB),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(20.0),
),
child: Wrap(
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
runSpacing: 10,
children: <Widget>[
InkWell(
onTap: () {
print("bla");
},
child: Icon(
Icons.close,
),
),
Padding(padding: const EdgeInsets.all(5.0)),
Text(
"bla",
),
],
),
)
],
),
You can either use a RawChip, Chip,
and in avatar field pass your delete icon.
You can wrap your delete icon with InkeWell or GestureDetector to get the onTap event.
RawChip(
label: Text(
"bla",
),
avatar: InkWell(
onTap: () {},
child: Icon(
Icons.close,
),
),
)
Using delete in Avatar doesn't allow tap events, even with Inkwell or GestureDetector.
Use the Directionality widget instead
Directionality(
textDirection: TextDirection.rtl,
child: Chip(
deleteIcon: Icon( Icons.close, ),
onDeleted: () {setState(() {print("bla");}); }
label: Text("bla",),
),
);