Flutter: Positioning images

Flutter: Positioning images - flutter

This is the screen that I want to create:
As you can see I have got two photo in the center, how can I move this background pink image in the top left corner?
Here's a link to my full code https://pastebin.com/CwgsPx4a
children: <Widget> [
SizedBox(
height: 250,
child: Image.asset(
"assets/logo.png",
fit: BoxFit.contain,
)
),
SizedBox(
child: Image.asset(
"assets/top.png",
fit: BoxFit.contain,
)
),

Code:
Column(
children: [
// fake top image
Align(
alignment: Alignment.topLeft,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
const SizedBox(height: 50),
// fake logo
Container(
width: 100,
height: 100,
color: Colors.blue,
),
// fake other widgets
const SizedBox(height: 16),
Container(
width: 200,
height: 30,
color: Colors.green,
),
const SizedBox(height: 16),
Container(
width: 200,
height: 30,
color: Colors.green,
),
],
);
Result:

Related

Clip Container in Flutter

I want to clip a container in such a way like below image
I have read about a couple of clip but don't know how to achieve this.
I have tried implementing clipping using..
Container(
width: 300,
height: 300,
color: Colors.white,
child: ClipRRect(
child: Stack(
///clipBehavior: Clip.hardEdge,
children: [
Positioned(
left: 0,
top: 0,
child: Transform.rotate(
angle: 1,
child: Container(
color: Colors.red,
width: 250,
height: 250,
),
),
),
],
),
),
);
I have found a way to do this using CustomClipper

Is there any way to set the max size of the Expanded or Flex widget in Flutter?

Is there any way to set the max size of the Expanded or Flex widget in Flutter?
Containers constraints are not working at all.
Row(
children: [
Container(
decoration: BoxDecoration(
color: Colors.red,
),
child: SizedBox(
height: 30,
width: 50,
),
),
Flexible(
child: Container(
constraints:
const BoxConstraints(minWidth: 50, maxWidth: 100),
decoration: BoxDecoration(
color: Colors.blue,
),
child: SizedBox(
height: 30,
),
),
),
Container(
decoration: BoxDecoration(
color: Colors.green,
),
child: SizedBox(
height: 30,
width: 50,
),
),
],
),
What I want: Max Width
I tryed Everythig. Really.
Limit max width of Container in Flutter
This didn't help me.

The Expanded widget is supposed to take all the space available in a Row or a Column so you can't just limit its size by using SizedBox or any other method but you can do either of two things whichever suits your needs to limit its size:
Using the flex property of the Expanded Widget:
Row(
children: [
Expanded( //wrap all the widgets in your row with expanded
flex:1, //and provide a flex property (higher number equals more space taken)
child: Container(
decoration: BoxDecoration(
color: Colors.red,
),
child: SizedBox(
height: 30,
width: 50,
),
),
),
Expanded(
flex:2, // which means flex:2 will take twice the amount
child: Container(
constraints:
const BoxConstraints(minWidth: 50, maxWidth: 100),
decoration: BoxDecoration(
color: Colors.blue,
),
child: SizedBox(
height: 30,
),
),
),
Expanded(
flex:1, //same for this one
child: Container(
decoration: BoxDecoration(
color: Colors.green,
),
child: SizedBox(
height: 30,
width: 50,
),
),
),
],
),
Result:
Limiting the width of the Row itself:
SizedBox( //wrap your Row with a SizedBox and give it some width
width: 200,
child: Row(
children: [
Container(
Result:
Edit: As you want to have an adaptable container you just need to change some things:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, //add mainAxisAlignment to give spaceBetween the containers
children: [
Container(
decoration: BoxDecoration(
color: Colors.red,
),
child: SizedBox(
height: 30,
width: 50,
),
),
Container(
height: 30, //give you container some height instead of a child SizedBox
constraints:
BoxConstraints(minWidth: MediaQuery.of(context).size.width/10, maxWidth: MediaQuery.of(context).size.width/5), // add responsive constraints which change values according to your screen size
decoration: BoxDecoration(
color: Colors.blue,
),
child: Expanded(child: Container(),) //give it an Expanded widget to take in all the maxWidth
),
Container(
decoration: BoxDecoration(
color: Colors.green,
),
child: SizedBox(
height: 30,
width: 50,
),
),
],
),
And then you'll get this:
Shrinked:
Unshrinked:

Instagram style Listview in flutter

I am experimenting on creating Instagram style of listview in Flutter, where the top horizontal scrolling is of stories and the scroll section right below is a vertical one for the posts. I am just using a listview now and not a listview builder. But I somehow do not get the vertical scrolling in my output. Also, in the upper listview, the container size takes the size 100 of the parent container but not the height 80. How do I fix that?
Here is the code for :
body: Column(
children: [
Container(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.red,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.blue,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.green,
),
],
),
),
SizedBox(
height: 10,
),
ListView(
scrollDirection: Axis.vertical,
children: [
Container(
height: 100,
color: Colors.red,
),
Container(
height: 100,
color: Colors.blue,
),
Container(
height: 100,
color: Colors.green,
),
],
)
],
)
And here is my output:

Please check this code below.
Column(
children: [
Container(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.red,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.blue,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.green,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.green,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.green,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.green,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.green,
),
],
),
),
SizedBox(
height: 10,
),
SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height - 180,
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
Container(
height: 100,
color: Colors.red,
),
Container(
height: 100,
color: Colors.blue,
),
Container(
height: 100,
color: Colors.green,
),
Container(
height: 100,
color: Colors.red,
),
Container(
height: 100,
color: Colors.blue,
),
Container(
height: 100,
color: Colors.green,
),
Container(
height: 100,
color: Colors.red,
),
Container(
height: 100,
color: Colors.blue,
),
Container(
height: 100,
color: Colors.green,
),
],
),
),
)
],
)

Wrap vertical List View with an Expanded widget.
Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.red,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.blue,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.green,
),
],
),
),
SizedBox(
height: 10,
),
Expanded(
child: ListView(
scrollDirection: Axis.vertical,
children: [
Container(
height: 100,
color: Colors.red,
),
Container(
height: 100,
color: Colors.blue,
),
Container(
height: 100,
color: Colors.green,
),
],
),
)
],
)

Why is there a white line between 2 containers flutter

I am making a drawer for my app and it has 2 containers in the column widget, there seems to be a line in between these containers that ruins the appearance, i have tried this for the upper container
margin: EdgeInsets.only(bottom: 0),
padding: EdgeInsets.only(bottom: 0),
and this for the lower container
margin: EdgeInsets.only(top: 0),
padding: EdgeInsets.only(top: 0),
still the line remains. How to remove that line, any help would be appreciated. Here is the code for the drawer:
Drawer(
child: Column(
children: <Widget>[
Container(
height: globals.heightofdevice * 0.30,
width: double.infinity,
margin: EdgeInsets.only(bottom: 0),
padding: EdgeInsets.only(bottom: 0),
child: Stack(
children: <Widget>[
Image.asset(
'./images/drawerbackground.jpg',
fit: BoxFit.fitWidth,
),
Positioned(
left: globals.widthofdevice * 0.07,
bottom: 20,
child: Text(
globals.username,
style: GoogleFonts.quicksand(
textStyle: TextStyle(
// fontWeight: FontWeight.w700,
fontSize: 32,
color: Colors.white,
),
),
),
)
],
),
),
Container(
height: globals.heightofdevice * 0.70,
margin: EdgeInsets.only(top: 0),
padding: EdgeInsets.only(top: 0),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.redAccent, Colors.white],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
child: Stack(children: <Widget>[
Image.asset(
'./images/uni.jpg',
fit: BoxFit.cover,
width: double.infinity,
),
Column(
children: <Widget>[
listTileBuilder(Icons.history, 'History'),
listTileBuilder(Icons.info_outline, 'About the app'),
listTileBuilder(Icons.account_circle, 'Logout'),
listTileBuilder(Icons.exit_to_app, 'Exit'),
],
),
]),
)
],
),
)
You can clearly see the problem in this picture

it must be something with the image or the stack
another example lets try
return Scaffold(
appBar: new AppBar(
title: new Text("Drawer"),
),
drawer: Drawer(
child: Column(
children: <Widget>[
Container(
color: Colors.yellow,
height: MediaQuery.of(context).size.height * 0.30,
width: double.infinity,
child: new Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("./images/drawerbackground.jpg"), fit: BoxFit.fill)),
child: new Align(
alignment: Alignment.bottomLeft,
child: new Padding (
padding: EdgeInsets.only(left: 20.0, bottom: 10.0),
child: Text(
"globals.username",
style: TextStyle(color: Colors.white),
),
),
),
),
),
Container(
height: MediaQuery.of(context).size.height * 0.70,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("./images/uni.jpg"), fit: BoxFit.fill),
gradient: LinearGradient(
colors: [Colors.redAccent, Colors.white],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
child: Column(
children: <Widget>[
listTileBuilder(Icons.history, 'History'),
listTileBuilder(Icons.info_outline, 'About the app'),
listTileBuilder(Icons.account_circle, 'Logout'),
listTileBuilder(Icons.exit_to_app, 'Exit'),
],
),
)
],
),
),
body: Container(
child: Text('Add Moka'),
),
);

The problem is most likely the fact that your top widget's image is set to fit: BoxFit.fitWidth,. Since it is trying to fill the horizontal plain fully it will stop once it has done so and not scale vertically to cover the remaining white space.
To fill the space of the container not taken by your image with a color so it isn't a white line you can try this (changes background to black):
Container(
height: globals.heightofdevice * 0.30,
width: double.infinity,
margin: EdgeInsets.only(bottom: 0),
padding: EdgeInsets.only(bottom: 0),
colors: Colors.black, // Added color
child: Stack(
...
),
),
Or to try and make the image take up all the available space of the container, regardless of the image's size and aspect ratio you can change the BoxFit to fill:
Image.asset(
'./images/drawerbackground.jpg',
fit: BoxFit.fill, // BoxFit fill
),

Problem in set position with Stack and Positioned in flutter

I'm trying to make a card with "balloon" in top of card Here a example of what i'm trying to do
I'm doin'g in Flutter, the last update, i've tried add stack with positioned, but i got this horrible thing
My code about this is:
Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: Text('1'),
decoration:
BoxDecoration(color: Colors.redAccent, shape: BoxShape.circle),
),
Positioned(
left: 19,
top: 37,
child: Container(
height: 20,
width: 20,
color: Colors.green,
),
),
],
),
Card(
child: Container(
color: Colors.blue,
child: Text('aaaaaaaa'),
),
)
],
);
And my expected response was the link above

Please try this :-
Column(
children: <Widget>[
Container(
alignment: Alignment.topLeft,
child: Column(
children: <Widget>[
Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: Text('1'),
decoration: BoxDecoration(
color: Colors.redAccent, shape: BoxShape.circle),
),
Container(
height: 40,
width: 2,
color: Colors.green,
),
],
),
),
Container(
width: double.infinity,
child: Card(
child: Container(
color: Colors.blue,
child: Text('aaaaaaaa'),
),
),
)
],
)