Nowadays i have two Rows with a blue Container, but between this Containers i'm facing a white line (i don't know if the flutter put padding or margin between the rows).
I try this way:
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.lightBlue[800],
elevation: 0.0,
iconTheme: IconThemeData(
color: Colors.white, //change your color here
),
),
body: Column(children: <Widget>[
Row(children: [
Container(
color: Colors.lightBlue[800],
height: 170,
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
new Container(
width: 120.0,
height: 120.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new NetworkImage(
"https://i.imgur.com/BoN9kdC.png")))),
Padding(
padding: const EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Text("RENATO",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
color: Colors.white)))
],
),
]),
),
]),
Row(children: <Widget>[
Container(
color: Colors.lightBlue[800],
height: 100,
width: MediaQuery.of(context).size.width
)
],)
]),
drawer: Drawer(
child: SafeArea(
child: Padding(
padding: const EdgeInsets.all(18.0),
child: ListView(
children: <Widget>[
ListTile(
title: Text('Item1'),
)
],
),
),
),
),
);
This is the result:
How i can fix this?
Try remove the border from Container, or set the color of the border to
Related
My UI currently looks like this:
I want to center the text in the middle of the space that is left over after the image is placed. However, I also want to make sure that my text does not overflow due to the size. How can I do that? My code is as follows:
Widget build(BuildContext context) {
return Card(
color: Theme.of(context).scaffoldBackgroundColor,
elevation: 0,
child: Column(
children: [
Divider(
thickness: 2,
color: Colors.white,
height: 0,
),
Row(
children: [
Container(
padding: EdgeInsets.all(0),
width: 100,
height: 100,
child: CircleAvatar(
radius: 50,
backgroundImage: NetworkImage(imageUrl),
),
),
Container(
padding: EdgeInsets.all(40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
alignment: Alignment.topCenter,
child: Text(
name,
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
Container(
alignment: Alignment.bottomLeft,
padding: EdgeInsets.all(15),
child: Text(
modalityText,
style: TextStyle(
fontSize: 10,
color: Colors.white,
),
),
),
],
),
),
],
),
],
),
);
}
Here, this is one way of doing what you want
Widget build(BuildContext context) {
return Card(
color: Theme.of(context).scaffoldBackgroundColor,
elevation: 0,
child: Column(
children: [
Divider(
thickness: 2,
color: Colors.white,
height: 0,
),
Row(
children: [
Container(
padding: EdgeInsets.all(0),
width: 100,
height: 100,
child: CircleAvatar(
radius: 50,
backgroundImage: NetworkImage("imageUrl"),
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
alignment: Alignment.topCenter,
child: Text(
"name",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
Container(
alignment: Alignment.bottomLeft,
padding: EdgeInsets.all(15),
child: Text(
"modalityText",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10,
color: Colors.white,
),
),
),
],
),
),
),
],
),
],
),
);
}
This is the UI I want to implement, I only started playing with flutter last week so I am not as fluent. I was wondering what is the best way to achieve this layout.
This is what I get with a stack and column:
This is the code:
Column(
children: <Widget>[
Expanded(
child: Container(
constraints: BoxConstraints.expand(height: 150),
color: Colors.blue,
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Positioned(
bottom: -40,
left: MediaQuery.of(context).size.width * 0.4,
// alignment: Alignment.bottomCenter,
child: Container(
constraints: BoxConstraints.expand(height: 80, width: 80),
color: Colors.green,
),
),
],
),
),
flex: 3,
),
Expanded(
child: Container(
margin: EdgeInsets.all(15.0),
color: Colors.red,
),
flex: 7,
)
],
);
I made something like the image you provided with dummy image and some icon you can change icons if you want,use media query size instead of fixed padding tops
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
children: [
Stack(children: [
Container(
child: FittedBox(
fit: BoxFit.fill,
child: Image.network('https://picsum.photos/300?image=10')),
height: 150,
width: double.infinity,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Padding(
padding: const EdgeInsets.only(top: 75),
child: MaterialButton(
onPressed: () {},
elevation: 2.0,
color: Colors.red,
child: Icon(
Icons.message,
size: 27.0,
),
padding: EdgeInsets.all(20),
shape: CircleBorder(),
),
),
Padding(
padding: const EdgeInsets.only(top: 75),
child: Column(children: [
CircleAvatar(
radius: 55.0,
backgroundImage:
NetworkImage('https://i.pravatar.cc/150?img=54'),
backgroundColor: Colors.transparent,
),
Text("David Beckham"),
Text("Model/SuperStar")
]),
),
Padding(
padding: const EdgeInsets.only(top: 75),
child: MaterialButton(
onPressed: () {},
elevation: 2.0,
color: Colors.blue,
child: Icon(
Icons.add,
size: 27.0,
),
padding: EdgeInsets.all(20),
shape: CircleBorder(),
),
),
],
),
]),
Container(height: 100, color: Colors.red),
Container(height: 100, color: Colors.green),
Container(height: 100, color: Colors.yellow),
Container(height: 100, color: Colors.blue),
],
)));
}
}
The problem I have is that BackdropFilter is applying the blur but on the top border of the child there is a white shadow (screenshot with black background).
The only way to remove it is to set sigmaY=0 but the blur is not homogeneous.
How can I fix it?
This is the code so far:
return Container(
color: Theme.of(context).accentColor,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(height: 5,),
SizedBox(
height: headerHeight,
child: Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: Image.network("https://coolbackgrounds.io/images/backgrounds/black/pure-black-background-f82588d3.jpg").image,//homeData.imageFromString.image,
fit: BoxFit.cover,
),
),
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 15.0),
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Row(),
),
CircleAvatar(
radius: 50,
backgroundColor: Colors.blueGrey,
backgroundImage: homeData.imageFromString.image,
),
SizedBox(
height: 10,
),
Text(
homeData.name,
style: TextStyle(fontSize: 30.0, color: Colors.white),
),
Expanded(
child: Row(),
),
],
),
),
),
),
),
I am wondering how I can extend the background image to the app bar. Right now the background photo stops close to the app bar and the app bar is transparent.
appBar: new AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: new IconThemeData(color: Color(0xFF18D191)),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/surf.jpg'),
fit: BoxFit.cover,
),
),```
Remove the AppBar from appBar parameter of scaffold.
Wrap the body of the scaffold with Stack and place the same AppBar at the bottom
body:Stack(
children:<Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/surf.jpg'),
fit: BoxFit.cover,
),
),
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child:AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: new IconThemeData(color: Color(0xFF18D191)),
)
)
]
)
Unfortunately, I am not able to do it :(
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: new IconThemeData(color: Color(0xFF18D191)),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/surf.jpg'),
fit: BoxFit.cover,
),
),
child: Container(
width: double.infinity,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new StakedIcons(),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8.0, bottom: 80.0),
child: new Text(
"Surf Spots",
style: new TextStyle(fontSize: 30.0),
),
),
],
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),
child: new TextField(
decoration: new InputDecoration(labelText: 'Email'),
),
),
new SizedBox(
height: 25.0,
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),
child: new TextField(
obscureText: true,
decoration: new InputDecoration(labelText: 'Password'),
),
),
new Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 5.0, top: 10.0),
child: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(
builder: (context) => HomePage ()
));
},
child: new Container(
alignment: Alignment.center,
height: 60.0,
decoration: new BoxDecoration(
color: Color(0xFF18D191),
borderRadius: new BorderRadius.circular(10.0)),
child: new Text("Login",
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 10.0, right: 10.0, top: 10.0),
child: new Container(
alignment: Alignment.center,
height: 60.0,
child: new Text("Forgot Password",
style: new TextStyle(
fontSize: 17.0, color: Color(0xFF18D191))),
),
),
)
],
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 50.0),
child: new Text("Create a New Account", style: new TextStyle(
fontSize: 17.0, color: Color(0xFF18D191), fontWeight: FontWeight.bold)),
),
],
),
),
],
),
),
),
);
}
}```
I am trying to align the Top AppBar Actions to the left but I failed
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
titleSpacing: 0.0,
elevation: 5.0,
backgroundColor: Color(0xff201F23),
title: Icon(
Icons.polymer,
color: Colors.orange,
size: 30.0,
),
actions: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 8, 10, 8),
child: CircleAvatar(
backgroundImage: ExactAssetImage('assets/Bronze.jpg'),
),
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.orange,
width: 1.0,
),
borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
)),
Container(
//margin: EdgeInsets.fromLTRB(0, 0, 130, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(
'Ov3rControl',
style: TextStyle(fontSize: 12.0),
),
),
SizedBox(height: 4.0),
Row(
children: <Widget>[
Icon(
Icons.trip_origin,
color: Colors.orange,
size: 12.0,
),
SizedBox(width: 4.0),
Text('1000', style: TextStyle(fontSize: 12.0))
],
),
]),
)
],
),
drawer: Drawer());
}
I want the items to be next to the Logo. how can I achieve that?
I Tried putting left margin to the container but the design break when the name of the user gets bigger
Also, I am new to flutter is there is any way to make this code better?
Is this what you are looking for?
Find the changes in the code below:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
titleSpacing: 0.0,
elevation: 5.0,
backgroundColor: Color(0xff201F23),
title: Row(
children: <Widget>[
Icon(
Icons.polymer,
color: Colors.orange,
size: 30.0,
),
SizedBox(width: 15,),
Container(
margin: EdgeInsets.fromLTRB(0, 8, 10, 8),
child: CircleAvatar(
backgroundImage: ExactAssetImage('assets/Bronze.jpg'),
),
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.orange,
width: 1.0,
),
borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
)),
Container(
//margin: EdgeInsets.fromLTRB(0, 0, 130, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(
'Ov3rControl',
style: TextStyle(fontSize: 12.0),
),
),
SizedBox(height: 4.0),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.trip_origin,
color: Colors.orange,
size: 12.0,
),
SizedBox(width: 4.0),
Text('1000', style: TextStyle(fontSize: 12.0))
],
),
]
),
)
],
),
),
drawer: Drawer()
);
}
You can also use the leading property in the AppBar and pass your widget to it
leading: IconButton(
icon: Icon(Icons.shopping_cart),
tooltip: 'Open shopping cart',
onPressed: () {
// handle the press
},
),