Related
I have a list with an Container. With a Content Padding of 0 it´s look like this:
but I want the List Tile (the white writing) in the middle of the box.
Here is the part of my Code where the Magic is done:
return Card(
color: Color.fromRGBO(25, 29, 30, 100),
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
child: Container(
height: 70,
padding: EdgeInsets.fromLTRB(15, 20, 20, 15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.red,
),
child: ListTile(
contentPadding: EdgeInsets.symmetric(vertical: 0),
leading: Checkbox(
side: const BorderSide(
color: Colors.white
),
Thanks for help in advance
use title in your ListTile like this
ListTile(
contentPadding: EdgeInsets.symmetric(vertical: 0),
leading: Checkbox(
side: const BorderSide(
color: Colors.white
),
),
title: Text('Your text'),
)
Nevermind.
I removed the container and changed the code to this:
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Colors.red,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
child: ListTile(...
It solved the problem with the container and positioned the ListTile in the middle
Trying to implement this style of login in flutter. Any ideas? Tried using the prefix icon and row but not really getting it.
Example Login Image
You can use an Stack with two children, one for the leading icon and the other for the text input. I wrote the code you need to implement what you want. So, I will share it with you. You only have to set up the colors and the text style as you prefer.
Here we go...
Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(vertical: 6.0),
height: 36.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24.0),
boxShadow: [BoxShadow(blurRadius: 12.0)],
),
child: Padding(
padding: EdgeInsets.fromLTRB(70.0, 0.0, 30.0, 0.0),
child: TextFormField(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 8.0),
border: InputBorder.none,
hintText: 'Username',
),
),
),
),
Container(
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
boxShadow: [BoxShadow(blurRadius: 12.0)],
),
child: Padding(
padding: EdgeInsets.all(12.0),
child: Icon(Icons.person_outline),
),
),
],
),
SizedBox(height: 12.0),
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(vertical: 6.0),
height: 36.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24.0),
boxShadow: [BoxShadow(blurRadius: 12.0)],
),
child: Padding(
padding: EdgeInsets.fromLTRB(70.0, 0.0, 30.0, 0.0),
child: TextFormField(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 8.0),
border: InputBorder.none,
hintText: 'Password',
),
),
),
),
Container(
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
boxShadow: [BoxShadow(blurRadius: 12.0)],
),
child: Padding(
padding: EdgeInsets.all(12.0),
child: Icon(Icons.lock_outline),
),
),
],
),
],
),
And the output is this:
I am creating a search widget and I want it to have a little bit of elevation, I can do that by using Material widget but Material has other properties like color as well and it creates weird edges when i wrap my container with material widget.
Widget search(BuildContext context) {
var theme = Provider.of<ThemeNotifier>(context);
return Container(
margin: EdgeInsets.only(top: 28, left: 10, right: 10),
child: Material(
elevation: 10,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: theme.getTheme().materialTheme.buttonColor,
),
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
InkWell(onTap: () => print("Menu tapped"), child: Icon(Icons.menu)),
Expanded(
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.only(left: 15, right: 15),
hintText: "Search City",
filled: false,
border: InputBorder.none),
),
),
Icon(Icons.search),
],
),
),
),
);
}
here is how my widget looks like:
As a workaround, you may use a BoxShadow instead of Material elevation.
Widget search(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 28, left: 10, right: 10),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(blurRadius: 5.0, spreadRadius: 1.0, color: Colors.grey.shade400)
],
borderRadius: BorderRadius.circular(20),
color: Colors.grey.shade200,
),
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
InkWell(onTap: () => print("Menu tapped"), child: Icon(Icons.menu)),
Expanded(
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.only(left: 15, right: 15),
hintText: "Search City",
filled: false,
border: InputBorder.none),
),
),
Icon(Icons.search),
],
),
),
);
}
^ Replace colors from your theme provider.
You can still use Material to wrap your widget without having those unwanted edges. All you need to do is to specify the shape property for your Material widget, in your case with a RoundedRectangleBorder, like this:
Widget search(BuildContext context) {
var theme = Provider.of<ThemeNotifier>(context);
return Container(
margin: EdgeInsets.only(top: 28, left: 10, right: 10),
child: Material(
shape: RoundedRectangleBorder( // Add these lines
borderRadius: BorderRadius.circular(22.0),), // change radius to whatever you want
elevation: 10,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: theme.getTheme().materialTheme.buttonColor,
),
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
InkWell(onTap: () => print("Menu tapped"), child: Icon(Icons.menu)),
Expanded(
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.only(left: 15, right: 15),
hintText: "Search City",
filled: false,
border: InputBorder.none),
),
),
Icon(Icons.search),
],
),
),
),
);
}
You can do the same with a CircleBorder() for example if you want to wrap something like a CircleAvatar, or anything else.
Note: A shadow for this will be displayed only if you also have an elevation greater than 0 specified.
If you really don't want to use Material widget then you can get rid of it and replace the Container with a Card widget. That way you can also specify an elevation as Card has that property and you will have to specify a shape as well if you do not like the default radius of the rounded corners.
Container(
child: Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
border: Border(
left: BorderSide(
color: Colors.green,
width: 3,
),
),
),
height: 50,
),
This is supposed to show a rounded-edged container with a green left border 3px wide, and the child Text "This is a Container". However, it just shows a rounded-edged container with an invisible child and an invisible left border.
When I take out the borderRadius object, the child Text and the green left border is visible, but introducing it hides the left border and child Text again.
The major problem seems to be the custom left border, because using border: Border.all(width: 0) and borderRadius: BorderRadius.circular(10) makes the edges rounded as needed and also shows the child. But now I cant apply the green left border which is quite important in this particular setup.
So is there something I'm doing wrong, or is this a bug in flutter, or is it just something that is not allowed?
Thank you in advance.
Edit: The image below is the end result. The colors don't matter
It's not possible to add border: and borderRadius: at the same time, you'll get this error:
A borderRadius can only be given for uniform borders.
You can achieve what you want using the borderRadius: and a boxShadow: instead of border: like this:
boxShadow: [
BoxShadow(color: Colors.green, spreadRadius: 3)
]
Your sample code would be like this:
Container(
child: Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.green, spreadRadius: 3),
],
),
height: 50,
),
Edit: To achieve the example you now provided, you could do this:
Container(
padding: EdgeInsets.only(left: 12.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.green,
),
height: 50,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(10.0),
bottomRight: Radius.circular(10.0)),
color: Colors.white,
),
child: Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
),
),
),
Another solution:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.white,
),
height: 50,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 12.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0)),
color: Colors.green,
),
),
Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
)
],
),
),
There is an answer here
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 1.0,
),
color: Colors.transparent,
borderRadius: BorderRadius.circular(30.0),
),
),
This might be so late but also it might be useful for others.
You can wrap your Container inside a ClipRRect, give the ClipRRect the radius and give the Container the border!
Example:
ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
child: Container(
height: 100,
width: double.maxFinite,
padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration(
border: Border(
left: BorderSide(width: 8.0, color: Colors.green),
),
),
),
),
This should do the UI you lastly posted.
If you want to achieve borderRadius you could also use a PhysicalModel, but you'll have to provide colour. You also can have a shadow for your widget.
PhysicalModel(
color: Colors.red,
elevation: 5,
shadowColor: Colors.blue,
borderRadius: BorderRadius.circular(20),
child: SizedBox(width: 75, height: 75),
)
I think an easier way inspired by #pablo 's answer would be to just make a boxShadow with and offset but without any blur.
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(
top: Radius.circular(10),
),
boxShadow: [
// to make elevation
BoxShadow(
color: Colors.black45,
offset: Offset(2, 2),
blurRadius: 4,
),
// to make the coloured border
BoxShadow(
color: Colors.blue,
offset: Offset(0, 4),
),
],
),
The decoration above will give us an elevated box which has a blue border in the bottom.
Another benefit of this approcah is that you can use it with
borderRadius: BorderRadius.circular(num)
Which means you can have a container with all rounded sides + a colored border.
Please note that the coloured border comes under the original shadow. This is done to prevent the elevation color from darkening the border.
I archieve do a Inkwell (that simulate a button) circular with an icon inside :
InkWell(
onTap: (){},
child: Container(
width: 50,
height: 50,
decoration: ShapeDecoration(
shape: CircleBorder(), //here we set the circular figure
color: Colors.red
),
child: Center(
child: Icon(
Icons.email,
size: 30,
color: Colors.white,
)
),
)
)
link example of result: https://images.vexels.com/media/users/3/140138/isolated/preview/88e50689fa3280c748d000aaf0bad480-icono-de-ronda-de-correo-electronico-1.png
////Hope this will work for you,Thanks
import 'package:flutter/material.dart';
class System extends StatefulWidget {
const System({Key? key}) : super(key: key);
#override
_SystemState createState() => _SystemState();
}
class _SystemState extends State<System> {
#override
Widget build(BuildContext context) {
return Scaffold(
body:Padding(
padding: const EdgeInsets.only(top:80.0),
child: Column(
children: [
ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 100,
width: double.maxFinite,
padding: const EdgeInsets.all(16.0),
decoration: const BoxDecoration(
color: Color(0xffF6EBEC),
border: Border(
bottom: BorderSide(width: 8.0, color: Color(0xffA24949)),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const CircleAvatar(
backgroundColor: Color(0xffA24949),
child: Icon(Icons.close,
color: Color(0xffF6EBEC), size: 40),
),
const SizedBox(width: 10),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text("Invalid",
style: TextStyle(color: Color(0xffA24949), fontSize: 18)),
SizedBox(
width: 243,
child: Text("Details do not match the issuer records",overflow: TextOverflow.ellipsis,maxLines: 1,))
])
],
),
),
),
),
),
SizedBox(height: 20,),
ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 100,
width: double.maxFinite,
padding: const EdgeInsets.all(16.0),
decoration: const BoxDecoration(
color: Color(0xFFE9F6EB),
border: Border(
bottom: BorderSide(width: 8.0, color: Color(0xFF69A258),),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const CircleAvatar(
backgroundColor: Color(0xFF69A258),
child: Icon(Icons.check_rounded,
color: Color(0xFFE9F6EB), size: 40),
),
const SizedBox(width: 15),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text("Valid",
style: TextStyle(color: Color(0xFF69A258), fontSize: 18)),
Text("Document successfully validated.")
])
]),
),
),
),
),
],
),
),
);
}
}
I have a problem where I want to create border and rounded box for my drawer list item. I could manage to create the border and rounded box but the problem there is too much space between the text and icon and the surrounding box.
I have tried few ways purely using the container, container and the list tile all gives me the same results. I have tried to play around the padding also the same too.
Below are different codings.
Column(children: <Widget>[
//Padding(padding:const EdgeInsets.fromLTRB(15, 0, 10, 10)),
Container(
height: 55,
padding: new EdgeInsets.fromLTRB(0, 0, 0, 0),
margin: EdgeInsets.symmetric(vertical: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6.0),
border: Border.all(color: Colors.black),
),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
IconButton(
icon: Icon(Icons.map),
onPressed: () => {},
),
Padding(padding: EdgeInsets.only(left: 20.0)),
Text("TEST"),
],
),
]
),
),
Container(
margin: const EdgeInsets.fromLTRB(5, 0, 5, 5),
alignment: Alignment.bottomRight,
child: ListTile(
leading: new Icon(Icons.map),
title: Text("Map View"),
trailing: Icon(Icons.arrow_forward),
),
decoration: BoxDecoration(
color: getColor(title,"Dashboard"),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular( 8.0),
bottomLeft: Radius.circular( 8.0),
bottomRight: Radius.circular( 8.0),
)
),
),
Ink(
color: getColor(title,"Dashboard"),
child: ListTile(
leading: new Icon(Icons.map),
title: Text("Map View"),
trailing: Icon(Icons.arrow_forward),
),
),
Padding(padding:const EdgeInsets.fromLTRB(5, 0, 10, 10)),
ListTile(
leading: new Icon(Icons.map),
title: Text("Map View"),
trailing: Icon(Icons.arrow_forward),
),
ListTile(
leading: new Icon(Icons.map,color: Colors.blue,),
title: Text("List View"),
trailing: Icon(Icons.arrow_forward),
),
],
)
I have attached the image output too.I prefer like the second option but too much space in the box and the words?
Here is my updated codes.
Column(children: [
Container(
padding: EdgeInsets.all(5.0),
margin: EdgeInsets.symmetric(vertical: 10.0),
decoration: BoxDecoration(
color: getColor(title,"Dashboard"),
borderRadius: BorderRadius.circular(6.0),
border: Border.all(color: Colors.amber),
),
child:Row(children: <Widget>[
Icon(Icons.map),
SizedBox(width: 10),
Text("Map View"),
Expanded(child: Container (),),
Icon(Icons.arrow_forward),]
)
),
Container(
padding: EdgeInsets.all(5.0),
margin: EdgeInsets.symmetric(vertical: 10.0),
decoration: BoxDecoration(
color: getColor(title,"Dashboard"),
borderRadius: BorderRadius.circular(6.0),
border: Border.all(color: Colors.amber),
),
child:Row(children: <Widget>[
Icon(Icons.map),
SizedBox(width: 10),
Text("Map View"),
Expanded(child: Container (),),
Icon(Icons.arrow_forward),]
)
),
]),
You might want to drop ListTile in favour of a custom Row.
Row(children: [
Icon(Icons.map),
SizedBox(width: 10),
Text("Map View"),
Expanded(child: Container (),),
Icon(Icons.arrow_forward),])
(Sorry for the messy code as I'm typing this on my phone.)
With this, you can have more control over your padding and how much space between your Widgets in your row.