I am trying to design this UI but I am having problems creating it. Currently using expansion tile but I am not able to get desired results.
This is what I have tried right now
ExpansionTile(
collapsedBackgroundColor: Colors.amber,
textColor: Colors.black,
title: Text("Health"),
children: [
Text("children 1"),
Text("children 2"),
ElevatedButton(onPressed: (() {}),
child: Text('Health'),
style: ElevatedButton.styleFrom(
elevation: 1,
primary: Colors.amber
),
),
],
),
Related
i want to remove the line under the list tile item like in the image :
..
note that my list tile is without ListView here is my code :
ListTile(
leading: ClipRRect(borderRadius: BorderRadius.circular(50),child:Image.memory(base64Decode(society['image'])
title: Text(society['Society_Name'] ),),
trailing: ElevatedButton(onPressed: (){
}, child: Icon(Icons.email_outlined, size: 25,), style: ElevatedButton.styleFrom(backgroundColor: green),),
),
Try below code and use Themes
Theme(
data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
child: ListTile(
title: Text(
'Hello, World!',
),
),
),
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: const Icon(Icons.home),
automaticallyImplyLeading: true,
title: const Text('test app'),
foregroundColor: Colors.black,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.menu),
),
],
),
body: Container(
child: Column(
children: [
Row(
children: [
const Text(
'New',
style: TextStyle(
color: Colors.black54,
fontSize: 40,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
height: 2,
shadows: [
Shadow(color: Colors.black12, offset: Offset(4, 10))
]),
),
ElevatedButton.icon(onPressed: (){}, icon: Icon(Icons.navigate_next),label: Text(' '),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.grey),
),
),
],
),
Row(),
],
),
),
),
);
}
use the Row widget properties for laying out its childrens
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [....]
)
the official docs are helpful in that matter
https://api.flutter.dev/flutter/widgets/Row-class.html
sidenote: if you are not planning to use any of the first container() properties then its better to get rid of it
There are 4 options u can use depending on what you want
If u want it below new u can use Column instead of Row .
If u want to put some space next to new u can use SizedBox(width:X) between the Text and the elevated button.
You can use mainAxisAlignment or crossAxisAlignment inside the row or column to customize the position
you can find examples about them here https://docs.flutter.dev/development/ui/layout
you can use margin or padding on elevated button to customize its own position
I'm using the Flutter Speed Dial plugin within a container. I need to toggle the visibility of just one of its children (SpeedDialChild);
child: Container(
width: 165,
height:400,
child:
SpeedDial(
overlayOpacity: 0.4,
icon: Icons.add,
activeIcon: Icons.expand_less,
buttonSize: 60.0,
backgroundColor: Color(0x00000000),
overlayColor: Color(0x00000000),
foregroundColor: Colors.white,
children: [
SpeedDialChild(
child: Icon(Icons.block),
backgroundColor: Colors.brown,
labelBackgroundColor: Colors.white,
label: 'abuse',
labelStyle: TextStyle(fontSize: 14.0),
onTap: () => print('rude'),
),
SpeedDialChild(
child: Icon(TriangleAll.edit_3),
backgroundColor: Colors.deepPurple[200],
labelBackgroundColor: Colors.white,
label: 'edit',
labelStyle: TextStyle(fontSize: 14.0),
onTap: () {},
onLongPress: () {},
),
],
),
),
I tried wrapping the Visibility widget on the icon but then I get a blank white icon where there should be an empty space.
The SpeedDialChild itself can't be wrapped with the Visibility Widget. So I need another option.
Anyone know another way to accomplish this?
Here's the answer from the issues queue at Github;
if (thisid==thatid) SpeedDialChild(...)
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
],
),
),
),
),