in flutter i want to have simple Text inside Container with background color on container, for example:
unfortunately i can't set or make this screen shot with flutter widgets
Expanded(
child: Container(
margin: EdgeInsets.only(top: 10.0),
child: ListView(
children: <Widget>[
Container(
padding: EdgeInsets.only(right: 1.0, left: 1.0),
child: Center(
child: bottomSheetDashBoardItems(
widget.dashboardItems),
),
), //container
], //list view children
), //list view
), //container
), //Expanded
Widget bottomSheetDashBoardItems(List<DashboardItems> dashboardItems) {
return Wrap(
children: dashboardItems
.map((item) => Container(
width: 75.0,
height: 75.0,
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(5.0)),
boxShadow: [
BoxShadow(
blurRadius: 0.5,
color: Colors.black,
offset: Offset(0.0, 0.0),
)
]),
child: Center(
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 12.0),
child: Align(
alignment: Alignment.center,
child: Image.asset(
item.icon,
width: 40.0,
height: 40.0,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
color: Colors.indigo[400],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(5.0),
bottomRight: Radius.circular(5.0),
),
),
child: Padding(
padding: const EdgeInsets.only(top: 3.0),
child: Text(
item.title,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'IranSansLight',
fontSize: 9.0),
),
),
),
),
],
)),
))
.toList());
}
result:
Align(
alignment: Alignment.bottomCenter,
child: Container(
// width: 75.0, <--- remove this width and try
height: 19.0,
decoration: BoxDecoration(
color: Colors.indigo[400],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(5.0),
bottomRight: Radius.circular(5.0),
),
),
hope work
#1
Do not initiate widget tree through functions. Create a class under StatelessWidget instead. For more info check out this answer.
#2
As for the red bar not auto expanding in width - since you already use Stack, I can suggest a simple solution.
Replace Align (2nd child of Stack) with Positioned like this:
Positioned(
left: 0,
right: 0,
bottom: 0,
height: 19,
child: // ...
)
And remove width property of the Container.
Let me know if this helped.
Related
I want to show container on top right of other container but its showing inside of it.
My code
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Color(0xffd1e6f5),
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SvgPicture.asset(
"assets/icon/notification.svg",
),
),
),
new Positioned( // draw a red marble
top: 0.0,
right: 0.0,
child: Container( decoration: BoxDecoration(
color: Color(0xff009fe1),
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: Padding(
padding: const EdgeInsets.all(3.0),
child: Text('01'),
),),
)
]
)
I want to show it outside a light container like this
You need an external container to simulate the overlap effect.
Check the behavior of that component and try replicate your desired behavior.
Container(
height: 140.0,
width: 140.0,
color: Colors.amber, // set as transparent.
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
height: 100.0,
width: 100.0,
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(10))
),
),
),
Align(
alignment: Alignment.topRight,
child: Container(
width: 40.0, height: 40.0,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(10))
)
),
),
],
),
),
In addition to the answer of Marcos. I would like to tell you about this package badges
Example Usage
Badge(
badgeContent: Text('3'),
child: Icon(Icons.settings),
)
Try below code hope its helpful to you.
Container(
height: 100.0,
width: 100.0,
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
height: 50.0,
width: 50.0,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Icon(
Icons.notifications,
color: Colors.white,
),
),
),
Positioned(
top: 17,
right: 17,
child: Container(
width: 25.0,
height: 25.0,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue[200],
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
child: Text(
'01',
),
),
),
],
),
),
Your result screen ->
You can also use Badge package here
Badge(
badgeColor: Colors.blue,
animationType: BadgeAnimationType.slide,
toAnimate: true,
position: BadgePosition.topEnd(
top: -10,
end: -10,
),
badgeContent: Text(
'01',
),
child: Container(
height: 50.0,
width: 50.0,
decoration: const BoxDecoration(
color: Color(0xffd1e6f5),
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Icon(
Icons.notifications,
color: Colors.white,
),
),
),
Your result screen using package ->
I'm trying to do this design
Which widget should I use to approach this result?
There are two tags and they are overlapped.
So you can use "Stack" to build it:
Widget _buildCustomTag() {
Radius radius = Radius.circular(6);
return Container(
height: 60,
margin: EdgeInsets.symmetric(horizontal: 4), // this is just for checking the view
child: Stack(
children: [
Positioned.fill(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.only(topRight: radius, bottomRight: radius)),
margin: EdgeInsets.symmetric(vertical: 4),
padding: EdgeInsets.symmetric(horizontal: 20),
alignment: Alignment.centerRight,
child: Text('R\$ 99,90'),
)),
Positioned(
top: 0,
bottom: 0,
child: Container(
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.only(
topRight: radius, bottomRight: radius)),
alignment: Alignment.center,
padding: EdgeInsets.only(right: 8, left: 20),
child: Text('05/01/2021'),
)),
],
));
}
You can use Expanded widget and adding its flex width value.
Row(
children: [
Expanded(
flex: 1,
child: Container(),
),
Expanded(
flex: 2,
child: Container(),
),
],
),
You should use Expanded or Flexible widget for that use below code :
Row(
children: [
Flexible(
flex: 1,
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
height: 50,
child: Text(
'05/01/2021',
style: TextStyle(
fontSize: 17,
color: Colors.white,
),
textAlign: TextAlign.center,
),
),
),
Flexible(
flex: 2,
child: Container(
padding: EdgeInsets.all(10),
alignment: Alignment.centerRight,
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
height: 45,
child: Text(
'R\$ 99,90',
style: TextStyle(
fontSize: 17,
color: Colors.black,
),
textAlign: TextAlign.center,
),
),
),
],
),
Your screen look like ->
I want to expand the background color of the Container to take the full height.
I already tried to set the height to double infinite and that just gets rid of my Two Text Widgets Title and Lemon Chicken. This is the code its inside a Scalfold widget this part its only the body.
body: SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 36),
child: GestureDetector(
onTap: () => print('Add Image'),
child: Icon(
Icons.add_a_photo,
size: 70,
color: Theme.of(context).primaryColor,
),
),
),
Container(
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 24),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
),
color: Colors.pink,
),
child: Form(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Title',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold),
),
Text(
'Lemon Chicken',
style:
TextStyle(color: Theme.of(context).primaryColor),
)
],
),
),
),
),
),
],
),
),
This is the Image of my app.
I just want to expand the Widget has the pink background color
you can use mediaquery to find device's height and set that as container's height
Container(
height: MediaQuery.of(context).size.height,
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 24),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
),
color: Colors.pink,
),
or as you did you can use double.infinity
Container(
height:double.infinity,
result:
I need to add shadow in my image. Just on image not the other container i try but its not showing shadow
Here is my code
return Container(
margin: EdgeInsets.only(left: 40),
width: MediaQuery.of(context).size.width * 0.5,
child: ListView.builder(
itemCount: _places.length,
itemBuilder: (ctx, int index) {
return Container(
padding: EdgeInsets.only(top: 50),
child: Column(
children: <Widget>[
Text(_places[index]['name'], style: TextStyle(fontSize: 20),),
Container(
padding: EdgeInsets.only(top: 20),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10)
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
width: 200,
child: Image(image: AssetImage('assets/images/500place.jpg')),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 7),
child: Row(
children: <Widget>[
Icon(Icons.favorite_border, size: 20),
Spacer(),
Text(
_places[index]['where'],
),
],
)
),
],
),
);
}),
);
As you see the result of the output screen I need to show the light shadow on image only i added the box shadow in container but its not working on image only
Wrap it with a Card..that will give you the elevation(shadow)..
You can do it like this..
Card(
child: Container(),
elevation: 20.0, // give it according to your requirement
),
For a single shadow line
Card(
child: Container(
width: double.infinity,
height: 1,
),
elevation: 1.0, // give it according to your requirement
)
I am using the Slidable Widget which works pretty well, but there is a strange behaviour while sliding my container. Here is the code and a GIF to show the vertical lines that should not appear.
edit:
I use this slide functionality within my friendslist. Therefore i call the createSlidable() within a loop. Within the Slidable Widget there is another method to create the child container getFriendContainer().
Widget getFriendContainer(Friend friend, int i) {
return Container(
padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 20, bottom: 10.0),
decoration: BoxDecoration(
color: Color.fromRGBO(13, 13, 56, 1.0),
borderRadius: i==0 ? BorderRadius.only(
topLeft: Radius.circular(25.0),
topRight: Radius.circular(25.0),
) : null,
),
child: Row(
children: <Widget>[
Expanded(
flex: 15,
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(9.0),
height: 40.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Color.fromRGBO(119, 119, 136, 1.0), width: 0.5),
),
child: Image.asset('assets/icon.png', width: 70.0, height: 70.0, color: Color.fromRGBO(119, 119, 136, 1.0),),
),
],
),
),
Expanded(
flex: 70,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
"${friend.name}",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14.0,
color: Colors.white,
),
)
),
],
),
),
Expanded(
flex: 15,
child: friend.muted ? friendMutedIcon(friend) : Container(),
),
],
),
);
}
Widget createSlidable(Friend friend, int i) {
return Slidable(
actionPane: SlidableDrawerActionPane(),
controller: _slidableController,
actionExtentRatio: 0.15,
child: ...,
secondaryActions: <Widget>[
SlideAction(
color: getFriendContainer(Friend friend, int i),
onTap: () {
},
child: Container(
height: 50.0,
width: 100.0,
decoration: BoxDecoration(
color: ...,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(25.0),
bottomLeft: const Radius.circular(25.0),
),
),
child: Icon(Icons.volume_off, color: ...,),
),
),
SlideAction(
color: ...,
onTap: () {
},
child: Container(
height: 50.0,
width: 100.0,
color: ...,
child: Icon(Icons.delete, color: ...,),
),
),
],
);
}
I would appreciate any kind of help.
I found a solution for this. Using the IconSlideAction Widgets instead of SlideAction the issue is solved.