Show Image over a widget also half of it outside the widget - flutter

here is the example screen of I'm trying to achieve, i tried several ways, even there is lot of Stack over flow answer outside, but that's not fixing this cause .
here is the example
what my output is here
how can I achieve this, also here is my code
Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.width / 2 + 145,
child: Stack(
children: [
Container(
height: 300,
width: double.infinity,
decoration: const BoxDecoration(
gradient: sLinearColorBlue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30))),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(),
Positioned(
height: 555,
child: CircleAvatar(
radius: 60.0,
child: ClipRRect(
child: Image.asset('assets/account.jpg'),
borderRadius: BorderRadius.circular(100.0),
),
),
),
],
),
],
),
)
],
);

Try wrapping the Row() within a Center() widget:
Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.width / 2 + 145,
child: Stack(
children: [
Container(
height: 300,
width: double.infinity,
decoration: const BoxDecoration(
gradient: sLinearColorBlue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30))),
),
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(),
Positioned(
height: 555,
child: CircleAvatar(
radius: 60.0,
child: ClipRRect(
child: Image.asset('assets/account.jpg'),
borderRadius: BorderRadius.circular(100.0),
),
),
),
],
),
),
],
),
)
],
);

Put row inside padding. Like below.
Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.width / 2 + 145,
child: Stack(
children: [
Container(
height: 300,
width: double.infinity,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.blue,
Colors.red,
],
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30))),
),
Padding(
padding: EdgeInsets.fromLTRB(
0,
(MediaQuery.of(context).size.width / 2 + 145) - (60 * 2),
0,
0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(),
Positioned(
height: 555,
child: CircleAvatar(
radius: 60.0,
child: ClipRRect(
child: Container(color: Colors.grey),
borderRadius: BorderRadius.circular(100.0),
),
),
),
],
),
)
],
),
)
],
);

Try below code
Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Padding(
padding: EdgeInsets.only(bottom: 30),
child: Container(
width:300,
height: 300,
margin: EdgeInsets.all(16.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Text('Your Data'),
],
),
),
),
),
),
Container(
height: 90,
width: 90,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.black12,
),
color: Colors.transparent,
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
),
),
),
),
],
),
Your Screen->

// try align widget
Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.width / 2 + 145,
child: Stack(
children: [
Container(
height: 300,
width: double.infinity,
decoration: const BoxDecoration(
color: Colors.grey,
borderRadius:
BorderRadius.only(bottomLeft: Radius.circular(30), bottomRight: Radius.circular(30))),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(),
Align(
alignment: Alignment.bottomCenter,
child: CircleAvatar(
radius: 60.0,
child: ClipRRect(
child: Image.asset('assets/account.jpg'),
borderRadius: BorderRadius.circular(100.0),
),
),
),
],
),
],
),
)
],
);

Related

can't load the image using the filepicker in flutter

final PlatformFile image;
final double size;
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(image.path!),
),
you need to used FileImage instead of AssetImage
decoration: new BoxDecoration(
color: Colors.transparent,
image: new DecorationImage(
image: new FileImage(File(image.path)),
fit: BoxFit.cover,
),
),
Use FileImage instead of AssetImage if you are trying to take from local path.
You can also do one thing check the _image value if it null shows image through your assets if not then you call it through FileImage(_image!)
//////code
File ?_image;
_image==null?Stack(
children: [
Container(
height: 150,
width:_width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 120,
width: 120,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(60),
border: Border.all(color: AppColors.white, width: 2.0),
image: DecorationImage(
image: AssetImage("assets/managerPicture.jpeg"),fit: BoxFit.cover,
)
/*gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Color(0xff00519E),
AppColors.blue,
Colors.blue.shade900,
],
)*/
),
/* child: ClipRRect(
borderRadius: BorderRadius.circular(60.0),
child: Image.asset("assets/manager.jpeg",height: 100,width: 100,)
//Icon(Icons.person, size: 100),
// child: Image.asset("assets/logo/profile.png", fit: BoxFit.fill),
),*/
),
],
),
),
Positioned(
top: 60,
right: 0,
left: 100,
bottom: 0,
child: GestureDetector(
onTap: (){
_showChoiceDialog(context);
},
child: Container(
height: 10,
width: _width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 35,
width: 35,
decoration: BoxDecoration(
color: AppColors.profiePicBackground,
borderRadius: BorderRadius.circular(60),
//border: Border.all(color: Colors.blue.shade900, width: 2.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(60.0),
child: Icon(MdiIcons.squareEditOutline,color: AppColors.popUpBlueColor,size: 20,),
),
),
],
),
),
),)
],
):Stack(
children: [
Container(
height: 150,
width:_width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 120,
width: 120,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: FileImage(_image!),
),
border: Border.all(color: AppColors.white, width: 2.0),
),
),
],
),
),
Positioned(
top: 60,
right: 0,
left: 100,
bottom: 0,
child: GestureDetector(
onTap: (){
_showChoiceDialog(context);
},
child: Container(
height: 10,
width: _width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 35,
width: 35,
decoration: BoxDecoration(
color: AppColors.profiePicBackground,
borderRadius: BorderRadius.circular(60),
//border: Border.all(color: Colors.blue.shade900, width: 2.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(60.0),
child: Icon(MdiIcons.squareEditOutline,color: AppColors.popUpBlueColor,size: 20,),
),
),
],
),
),
),)
],
)

How to remove space between widget inside column - Flutter

I have simple screen that contains of 2 widget and I wrap it using Column, but there is always small space between first widget and second widget. Is there a way to remove space in Column. here is the picture that I would like to remove the space:
and here is the code:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: cardWidth,
height: cardHeight,
child: Card(
// color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...
],
),
),
),
),
),
Container(
width: sizeWidth - 135,
height: noteHeight,
child: Center(
child: Text("hi.."),
),
decoration: BoxDecoration(
color: noteAuth,
border: Border.all(
color: noteAuth,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15))),
)
],
),
Your parent layout color and container color are both same then you use card and give padding and it takes some space.
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: double.infinity,
color: Colors.red, // here you change your color
// height: cardHeight,
child: Card(
// color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
],
),
),
),
),
),
Container(
width: double.infinity - 135,
// height: noteHeight,
child: Center(
child: Text("hi.."),
),
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.green,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15))),
)
],
)
Output:
edit the margin of the Card widget
Container(
width: double.infinity,
color: Colors.red, // here you change your color
// height: cardHeight,
child: Card(
// color: Colors.transparent,
margin: EdgeInsets.all(0), //************* Here ********************
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
],
),
),
),
),
),
mainAxisAlignment: MainAxisAlignment.center

Flutter Custom Painter Design

ive been trying to design this with custom painter or custom clipper, especially the curved bottom, can anyone help me?
If you want to design your own shape you can use https://fluttershapemaker.com/
I did something similar but with 3 zones. This widget works, you can personalize like you want:
Widget _getColumnColor(
{Color color1,
Color color2,
Color color3,
double radius,
Widget content1,
Widget content2,
Widget content3}) {
return Column(
children: [
Expanded(
flex: 2,
child: Stack(
children: [
Container(
color: color2,
),
Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
color: color1,
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(radius),
),
),
child: content1,
),
],
)),
Expanded(
flex: 1,
child: Stack(
children: [
Row(
children: [
Expanded(
child: Container(
color: color1,
)),
Expanded(child: Container(color: color3))
],
),
Container(
decoration: BoxDecoration(
color: color2,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(radius),
bottomRight: Radius.circular(radius),
),
),
width: double.infinity,
height: double.infinity,
child: content2,
),
],
)),
Expanded(
flex: 1,
child: Stack(
children: [
Row(
children: [
Expanded(
child: Container(
color: color2,
)),
Expanded(child: Container(color: color3))
],
),
Container(
decoration: BoxDecoration(
color: color3,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(radius),
bottomRight: Radius.circular(radius),
),
),
width: double.infinity,
height: double.infinity,
child: content3,
),
],
)),
],
);
}
Color1, color2 and color3 are zones colors, radius is the radius of corners and content1, content2 and content3 are the contents inside of three zones.

Specific position of icon in Container with BoxDecoration and child: Row

I am trying to move the red block to the right of the Container. I have tried many variations but no matter where I move the code, that "red container" bit, I cannot get it to the position on the top right. I will make it a clickable icon when I get the positioning right.
I did move it into the children Widget with the other Text, adjusted the "crossAxisAlignment to stretch in that row, and mainAxisAlignment to spaceBetween,"
The closest I have is the 2nd image which is the code added below.
What am I missing?
items.add(
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [BoxShadow(color: Colors.black12,spreadRadius: 2.0,blurRadius: 5.0),]),
margin: EdgeInsets.all(5.0),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0)),
child: Image.asset(object["personImage"],
width: 80,height: 80,fit: BoxFit.cover,
),
),
Container(
color: Colors.blue[900],
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(object["personName"]),
Text(object["personPlace"]),
Text(object["personDate"]),
Text(object["personCircle"]),
],
),
),
),
Container(
alignment: Alignment.topRight,
height: 42.0,
width: 42.0,
color: Colors.red,
)
],
),
),
);
},
);
return items;
Edit: So two solutions that worked out great. Adding a widget between blue and red containers. Thanks to you both: :)
T.T Sage » Spacer(),
Viren V Varasadiya » Expanded(child: Container()),
You can use a widget called Spacer() for this.
The Spacer widget takes up space that isn't used by the rest of your widget. Check the code below, it works fine:
items.add(
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [BoxShadow(color: Colors.black12,spreadRadius: 2.0,blurRadius: 5.0),]),
margin: EdgeInsets.all(5.0),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0)),
child: Image.asset(object["personImage"],
width: 80,height: 80,fit: BoxFit.cover,
),
),
Container(
color: Colors.blue[900],
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(object["personName"]),
Text(object["personPlace"]),
Text(object["personDate"]),
Text(object["personCircle"]),
],
),
),
),
// add your spacer widget here
Spacer(),
Container(
alignment: Alignment.topRight,
height: 42.0,
width: 42.0,
color: Colors.red,
)
],
),
),
);
},
);
return items;
I hope this answers your question.
You need to use Expanded widget to do so.
In following code i show how to add Expanded widget and where yo add.
Container(
color: Colors.blue[900],
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(object["personName"]),
Text(object["personPlace"]),
Text(object["personDate"]),
Text(object["personCircle"]),
],
),
),
),
Expanded(child: Container()), // added widget
Container(
alignment: Alignment.topRight,
height: 42.0,
width: 42.0,
color: Colors.red,
)

Custom card layout on flutter

I want to create a custom card layout or iPad and Tablets
Here's what I code so far
Widget _buildListItem(BuildContext context) {
return new Container(
child: ListView(
children: <Widget>[
Card(
elevation: 2,
child: ClipPath(
child: Container(
height: 70,
decoration: BoxDecoration(
border: Border(
right:
BorderSide(color: Colors.lightGreen, width: 30))),
child: Container(
height: 70,
child: Container(
alignment: Alignment(1.16, 0),
child: Icon(
Icons.arrow_forward_ios,
color: Colors.black,
size: 24.0,
semanticLabel: 'wweqweqwe',
)),
)),
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(3))),
),
)
],
));
}
}
I am new in the flutter please help me to build this.
Try this
Container(
height: 60,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.white),
child: Container(
child: Row(
children: <Widget>[
Container(
height: 60,
width: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
bottomLeft: Radius.circular(15),
),
color: Colors.blue),
child: Icon(
Icons.arrow_forward_ios,
color: Colors.black,
size: 24.0,
semanticLabel: 'wweqweqwe',
)),
Expanded(
child: Container(
color: Colors.red,
height: 60,
padding: EdgeInsets.all(5.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
Text('Text One'),
Column(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('Text Two'),
Text('Text Three'),
],
)
],
),
)),
Container(
height: 60,
width: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(15),
bottomRight: Radius.circular(15),
),
color: Colors.blue),
child: Icon(
Icons.arrow_forward_ios,
color: Colors.black,
size: 24.0,
semanticLabel: 'wweqweqwe',
)),
],
),
))
OUTPUT