can't load the image using the filepicker in flutter - 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,),
),
),
],
),
),
),)
],
)

Related

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

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),
),
),
),
],
),
],
),
)
],
);

3D Sphere Effect in Flutter

I want to create a view like below.
I tried adding a RadialGradient but it doesn't exact like this image.
Container(
height: 50,
width: 50,
decoration: const BoxDecoration(
color: Color(0xff2DD485),
shape: BoxShape.circle,
gradient: RadialGradient(colors: [Color(0xff42CF8C), Color(0xff1DAE69)], center: Alignment(0, -0.7), stops: [0, 1]),
),
child: const Icon(Icons.done_rounded, color: Colors.white),
)
a bit ugly, but do the trick:
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(25)),
child: Container(
height: 50,
width: 50,
color: const Color(0xff2DD485),
child: Stack(
alignment: AlignmentDirectional.center,
children: [
Positioned(
bottom: 22,
child: Container(
height: 50,
width: 50,
decoration: const BoxDecoration(
color: Color(0xff56dc9d),
shape: BoxShape.circle,
),
),
),
const Icon(Icons.done_rounded, color: Colors.white),
],
),
),
)

How to make an Icon overlay over an image

I'm new to flutter and not that experienced when it comes to programming in general. So I'm trying to do something like this
But I just can't seem to do it, I tried align properties, padding to make it move left and right, I also tried stacks but I don't have any idea how to do it.
This is my code for the image
Widget buildImage() {
return Padding(
padding: EdgeInsets.only(right: 10, left: 10, top: 20),
child: Align(
alignment: Alignment.bottomLeft,
child: Container(
height: 100,
width: 130,
decoration: BoxDecoration(
image: new DecorationImage(
image: new AssetImage(
"assets/images/profile-image.jpeg",
),
fit: BoxFit.cover,
),
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: 5.0,
),
),
),
));
}
This is my current progress
I would appreciate any help.
Here is the working code
Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
Container(
height: 200,
width: 200,
child: InkWell(
onTap: () => {},
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Container(
height: 200,
width: 200,
color: Colors.grey[200],
child: Icon(Icons.person),
),
),
),
),
Container(
height: 60,
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
padding: EdgeInsets.all(5),
child: Container(
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.grey[200]),
child: IconButton(
icon: Icon(Icons.edit),
onPressed: () {},
),
),
),
],
);
This can be achieved with the Stack widget check the docs it has a video explaining it really well.
It lets you positions its children relative to the edges of its box.
You can use Stack to place widget over widget. Here is the working example
Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
Container(
decoration: BoxDecoration(
image: new DecorationImage(
image: new AssetImage(
"assets/images/profile-image.jpeg",
),
fit: BoxFit.cover,
),
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: 5.0,
)),
height: 100,
width: 130,
),
Container(
height: 50,
width: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
padding: EdgeInsets.all(5),
child: Container(
decoration:
BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
child: Center(
child: IconButton(
icon: Icon(Icons.edit),
onPressed: () {},
),
),
),
),
],
)

How to add an icon with opacity layer over circular image in Flutter

I need to add camera icon with opacity layer over circular image.
I tried below code:
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage(userInfo.imageUrl),
fit: BoxFit.cover,
),
),
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
width: double.infinity,
padding: EdgeInsets.symmetric(vertical: 5),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.3),
),
child: Icon(
Icons.photo_camera,
color: Colors.white.withOpacity(0.5),
),
),
),
)
But I did not get the expected result:
Anyone have an idea how to make it works?
Thanks
Wrap it in the ClipRRect widget like this
Container(
height: 100,
width: 100,
child: ClipRRect(
borderRadius: BorderRadius.circular(50.0),
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/imgs/avatar-default.png"),
fit: BoxFit.cover,
),
),
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
width: double.infinity,
padding: EdgeInsets.symmetric(vertical: 5),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.3),
),
child: Icon(
Icons.photo_camera,
color: Colors.white.withOpacity(0.5),
),
),
),
),
),
),
You could also use ClipOval
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage(userInfo.imageUrl),
fit: BoxFit.cover,
),
),
child: ClipOval(
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
width: double.infinity,
padding: EdgeInsets.symmetric(vertical: 5),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.3),
),
child: Icon(
Icons.photo_camera,
color: Colors.white.withOpacity(0.5),
),
),
),
)
),

Problems with child and brackets

Morning guys,
I´ve problems with bracket and childs. When I combined Containers, Center and Stack and so on , it shows me most of the time red lines under some words. It´s always luck when I can solve it. Here is a part of my code where I will show you what I mean..
The problem is the first child after children:
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/kreis.jpeg"), fit: BoxFit.fill)),
child: Stack(
children: <Widget>[
child:Container(
Center(
Visibility(
child: Text("Gone"),
visible: visibleT,
child:Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/T.jpeg"),fit: BoxFit.fill),
),
),
),
Visibility(
child: Text("Gone") ,
visible: visibleB,
child:Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/B.png"),fit: BoxFit.fill),
),
),
),
Visibility(
child:Text("Gone"),
visible: visibleH,
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/h.png"),fit: BoxFit.fill),
),
),
)
),
Positioned(
right: 150,
top: 150,
width: 60,
height: 70,
child: FloatingActionButton(
onPressed:
_listen,
// setState(() { searchWord="Tinte";});
// getText();
child: Icon(_isListening ? Icons.mic : Icons.mic_none),
)
),
Positioned(
left: 100,
bottom: 10,
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
decoration: BoxDecoration(
color: Colors.cyanAccent[100],
borderRadius: BorderRadius.circular(6.0),
),
padding: EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 12.0,
),
child: Text(
_text,
style: TextStyle(fontSize: 24.0),
)
)
)
)
]
)
)
);
}
this is not the end, but I think this was the critical part
You must consider the tree structure in nested widgets!
Fixed:
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/kreis.jpeg"), fit: BoxFit.fill)),
child: Stack(children: <Widget>[
Container(
child: Center(
child: Visibility(
replacement: Text("Gone"),
visible: visibleT,
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/T.jpeg"), fit: BoxFit.fill),
),
),
))),
Visibility(
replacement: Text("Gone"),
visible: visibleB,
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/B.png"), fit: BoxFit.fill),
),
),
),
Visibility(
replacement: Text("Gone"),
visible: visibleH,
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/h.png"), fit: BoxFit.fill),
),
),
),
Positioned(
right: 150,
top: 150,
width: 60,
height: 70,
child: FloatingActionButton(
onPressed: _listen,
// setState(() { searchWord="Tinte";});
// getText();
child: Icon(_isListening ? Icons.mic : Icons.mic_none),
)),
Positioned(
left: 100,
bottom: 10,
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
decoration: BoxDecoration(
color: Colors.cyanAccent[100],
borderRadius: BorderRadius.circular(6.0),
),
padding: EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 12.0,
),
child: Text(
_text,
style: TextStyle(fontSize: 24.0),
)))
])));
}
Some widget only allow multiple children, in your code it look like you have multiple child for widget which can only handle one child only. Like stack allow multiple child but container do not allow multiple child. Please check all container code there is multiple child in the container widget.
Edit:
Error free code, please share design for the app so all widgets could be properly aligned.
here is the code
bool _isListening = false;
bool visibleT = true;
bool visibleH = true;
bool visibleB = true;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/logo.png"), fit: BoxFit.fill)),
child: Stack(
children: [
Container(
child: Center(
child: Visibility(
visible: visibleT,
child: Column(
children: [
Text("Gone"),
Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/images/logo.png"),
fit: BoxFit.fill),
),
),
],
),
),
),
),
Container(
child: Center(
child: Visibility(
visible: visibleB,
child: Column(
children: [
Text("Gone"),
Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/images/logo.png"),
fit: BoxFit.fill),
),
),
],
),
),
),
),
Container(
child: Center(
child: Visibility(
visible: visibleH,
child: Column(
children: [
Text("Gone"),
Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/images/logo.png"),
fit: BoxFit.fill),
),
),
],
),
),
),
),
Positioned(
left: 100,
bottom: 10,
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
decoration: BoxDecoration(
color: Colors.cyanAccent[100],
borderRadius: BorderRadius.circular(6.0),
),
padding: EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 12.0,
),
child: Text(
"Some Text",
style: TextStyle(fontSize: 24.0),
)))
],
),
),
floatingActionButton: Positioned(
right: 150,
top: 150,
width: 60,
height: 70,
child: FloatingActionButton(
child: Icon(_isListening ? Icons.mic : Icons.mic_none),
),
),
);
}