How do I create a selection avatar? in Flutter - flutter

I'm creating an app where the user can choose up to avatars, my question is how do I make the avatars have the following state: when selected, the selected avatar should display in a container.
below is an image of the avatar when selected.enter image description here
I'm creating an app where the user can choose up to avatars, my question is how do I make the avatars have the following state: when selected, the selected avatar should display in a container.
below is an image of the avatar when selected.enter image description here
Code:
//avatar selection
Center(
child: Container(
height: 130,
width: 130,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius:
BorderRadius.circular(30),
boxShadow: const [
BoxShadow(
blurRadius: 5.0,
color: Colors.grey),
],
),
child: Image.asset(
'assets/images/purple_male.png',
fit: BoxFit.scaleDown,
)),
),
const SizedBox(height: 50),
Padding(
padding: const EdgeInsets.all(1),
child: Row(
children: [
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(
50),
boxShadow: const [
BoxShadow(
blurRadius: 5.0,
color: Color.fromARGB(
255,
209,
209,
209)),
],
),
height: 90,
width: 90,
child: Image.asset(
'assets/images/purple_male2.png',
fit: BoxFit.scaleDown,
),
),
const SizedBox(width: 20),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(
50),
boxShadow: const [
BoxShadow(
blurRadius: 5.0,
color: Color.fromARGB(
255,
209,
209,
209)),
],
),
height: 90,
width: 90,
child: Image.asset(
'assets/images/purple_male.png',
fit: BoxFit.scaleDown,
),
),
],
),
),
),
),
);

Related

How to Flutter container error full width?

Hello I am new on flutter and I would like my container to take all the width of its parent but I get an error when adding width: double.infinite
I was able to browse the forum for a solution but most of them are about row and don't work for me.
I get the following error:
The relevant error-causing widget was
ListView
I would like my container with a red color to take the whole width
my code :
child: ListView.builder(
itemCount: series?.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (item, index) {
return Container(
clipBehavior: Clip.hardEdge,
margin: const EdgeInsets.only(bottom: 15),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
border: Border.all(
color:
const Color.fromRGBO(205, 205, 205, 1)),
boxShadow: [
BoxShadow(
color: Color.fromARGB(255, 216, 216, 216)
.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 3,
offset: Offset(
0, 3), // changes position of shadow
),
],
),
child: Row(
children: [
Container(
width: 100,
height: 150,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(078),
),
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
bottomLeft: Radius.circular(8)),
),
child: Image.network(
series![index].thumbUrl,
fit: BoxFit.cover,
),
)),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
color:
Color.fromARGB(255, 83, 30, 30),
height: 150,
child: Text("hhh"))
])
],
),
);
}),
enter image description here
I have already tried to use Expanded
Here is the solution:
child: ListView.builder(
itemCount: 3,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (item, index) {
return Container(
clipBehavior: Clip.hardEdge,
margin: const EdgeInsets.only(bottom: 15),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
border:
Border.all(color: const Color.fromRGBO(205, 205, 205, 1)),
boxShadow: [
BoxShadow(
color:
Color.fromARGB(255, 216, 216, 216).withOpacity(0.5),
spreadRadius: 2,
blurRadius: 3,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: Row(
children: [
Container(
width: 100,
height: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(078),
),
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
bottomLeft: Radius.circular(8)),
),
child: Icon(Icons.star))),
Expanded(
child: Container(
color: Color.fromARGB(255, 83, 30, 30),
height: 150,
child: Column(
children: [
Text("hhh"),
],
)),
)
],
),
);
}),

How to add text under images like shown in example below [Flutter]

I would like to add the text "Appointments" like shown in the example below. I've tried using the Text widget under Image.asset but I don't think I'm using it right. I'm still new to Flutter so any help would be much appreciated.
Expected Output
This is the code I have so far:
Container(
height: 250,
width: 320,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
boxShadow: kElevationToShadow[1],
color: Color.fromARGB(255, 255, 255, 255),
),
child: Align(
alignment: Alignment(0, -0.5),
child: Image.asset("assets/appointment.png", height: 150, width: 150),
),
),
Use below code :
Container(
height: 250,
width: 320,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
boxShadow: kElevationToShadow[1],
color: Color.fromARGB(255, 255, 255, 255),
),
child: Column(
children: [
Align(
alignment: Alignment(0, -0.5),
child: Image.asset("assets/appointment.png", height: 150, width: 150),
),
SizedBox(height: 20,),
Text('Appointments',style: TextStyle(color: Colors.black,fontSize: 18),),
],
),
),
Used card and column widget for this type of UI.
Card(
elevation: 10,
shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(10)),
child: Column(
children: [
// Your Image Widget
// Your Text Widget
],
),
),

How to add text on an Image in flutter?

Here's the code for an image with border,
Container(
child: Image.network(
"https://drive.google.com/uc?export=view&id=139Wu8bbLz5ubRECzdEmZof8crfGhx0oA", height: 140,fit: BoxFit.cover),
decoration: BoxDecoration(
border: Border.all(color: Colors.black12, width: 1),
),
),
How do I add text to it in such a way that I get an output like in the given image ?
you can use Stack, here is a sample:
Stack(
children: [
Container(
child: Image.network(
"https://drive.google.com/ucexport=view&id=1GgUaQNmNaY2h2oRqgBECQZzJ4I6MnV8G",
height: 140,
fit: BoxFit.cover,
),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(7)),
border: Border.all(color: Colors.black12, width: 1),
),
),
Positioned(
child: Text(
'Vegetables',
style: TextStyle(
fontSize: 42,
shadows: <Shadow>[
Shadow(
offset: Offset(1.0, 5.0),
blurRadius: 2.0,
color: Color.fromARGB(255, 0, 0, 0),
),
],
),
),
top: 45,
left: 20,
)
],
)
Instead of having image as a child of Container, you can use image:ImageDecoration and have the Text as the child:
Container(
child: Text('Vegetables'),
decoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage(
'https://drive.google.com/ucexport=view&id=1GgUaQNmNaY2h2oRqgBECQZzJ4I6MnV8G'),
fit: BoxFit.cover,
),
border: Border.all(color: Colors.black12, width: 1),
),
),
Try below code hope its help to you
Container(
height: 100,
width: 200,
child: Text(
'data',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
decoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage(
'https://drive.google.com/uc?export=view&id=1GgUaQNmNaY2h2oRqgBECQZzJ4I6MnV8G'),
fit: BoxFit.cover,
),
border: Border.all(color: Colors.black12, width: 1),
),
),
Your result screen
You can use Stack Widget to make beautiful designed widget

Flutter : the two container radius has a small line shadow

Now I am trying to draw a container with the radius border to intersect with another container
But there is a line that remains visible around each container as shown in the picture Does anyone know how to hide it!
there is my code for that
Container(
height: MediaQuery.of(context).size.height * .47,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Color.fromRGBO(28, 163, 200, 1),
border: null,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30.0),
//bottomLeft: Radius.circular(40.0),
),
),
),
Container(
color: Colors.transparent,
child: Container(
width: MediaQuery.of(context).size.width,
color: Color.fromRGBO(28, 163, 200, 1),
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Color.fromRGBO(247, 250, 251, 1),
border: null,
borderRadius: BorderRadius.only(
topRight: Radius.circular(30.0),
//bottomLeft: Radius.circular(40.0),
),
),
child: Padding(
padding: const EdgeInsets.only(left: 20, right: 20, top: 20),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"القائمة",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
color: Colors.black),
),
Spacer(),
Text(
"عرض الكل",
style: TextStyle(
fontSize: 14,
color: Color.fromRGBO(255, 140, 0, 1)),
),
],
),
),
),
),
),
sounds like a renderer artifact, if you change the top container height ratio it goes away
height: MediaQuery.of(context).size.height * .47, // <-- change this to be 0.5
if you really want that particular height, then use a Stack() rather than embedded Containers
if you change the hight of the container it will render correctly. I have attached a screenshot of the result I get with this:
Column(
children: [
Container(
height: 300, //<--- This is what's causing the issue
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Color.fromRGBO(28, 163, 200, 1),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30.0),
//bottomLeft: Radius.circular(40.0),
),
),
),
Container(
// color: Colors.transparent,
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Color.fromRGBO(28, 163, 200, 1),
),
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Color.fromRGBO(247, 250, 251, 1),
borderRadius: BorderRadius.only(
topRight: Radius.circular(30.0),
//bottomLeft: Radius.circular(40.0),
),
),
child: Padding(
padding: const EdgeInsets.only(left: 20, right: 20, top: 20),
child: Row(
children: [
Text(
"القائمة",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18, color: Colors.black),
),
Spacer(),
Text(
"عرض الكل",
style: TextStyle(fontSize: 14, color: Color.fromRGBO(255, 140, 0, 1)),
),
],
),
),
),
),
),
],
)

Widgets in a row not spacing themselves out evenly

I'm trying to make a widget to display posts by users on a social media platform, I have certain elements I want to include in the post, one of them being the external links he might have attached while creating the posts.
I want these links to be represented by rounded buttons(which I've managed to achieve through the use of ClipOval) and I want these ovals to be in a row spaced evenly from the center.
So far, the only way I've been able to space them out is by adding SizedBox(s) of a certain width. But this is not efficient for different posts may differ in the number of links and thus the number of Ovals. This would look messy then.
I have overlaid the row on top of the post's image(to which I've applied a linear gradient to make the buttons visible) using a stack.
Here's my code
class postTemplate extends StatelessWidget {
List <String> tags = ['tag1','tag2','tag3','tag4','tag5','tag6','tag7','tag8'];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
SizedBox(height: 150,),
Container(
height: 450,
child: Stack(
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(height: 20,),
Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32)
),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
ListTile(
title: Padding(
padding: const EdgeInsets.only(left : 70.0),
child: Text("Username"),
),
subtitle: Padding(
padding: const EdgeInsets.only(top: 10.0,left: 80.0),
child: Text("Hello"),
),
),
Stack(
children: [
Container(
child: Container(
foregroundDecoration:BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white, Colors.transparent],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
stops: [0, 0.3],
),),
child: Image(image: AssetImage('assets/images/modelPostImage.png'),fit: BoxFit.contain,)),
),
Positioned(
bottom: 10.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(width: 15,),
Container(
width: 56,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
SizedBox(width: 15,),
Container(
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
SizedBox(width: 15,),
Container(
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
],
),
),
],
),
Container(
height: 44,
width: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(22))
),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: tags.length,
itemBuilder: (BuildContext context, int index){
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(22),
border: Border.all(color: Colors.black)
),
margin: EdgeInsets.only(right: 13, left: 13),
child: Padding(
padding: const EdgeInsets.only(
top: 10.0, bottom: 5.0, right: 20, left:20
),
child: Text(tags[index],
style: TextStyle(
color: Colors.black
),),
),
);
},
),
),
],
),
)
],
),
CircleAvatar(
radius: 42,
backgroundImage: AssetImage('assets/Icons/profileLogo.jpg')
)
],
),
),
],
),
);
}
}
Any help would be appreciated.
Wrap with a container and give it full width and remove sizing
Positioned(
bottom: 10.0,
child: Container(
width:MediaQuery.of(context).size.width,
child :Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 56,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
Container(
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
Container(
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 1.0,
)
]
),
child: ClipOval(
child: Material(// button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child:Image(
image: new AssetImage("assets/Icons/browser.jpg"),
width: 32,
height:32,
color: null,
fit: BoxFit.scaleDown,
),),
onTap: () {},
),
),
),
),
],
),
),
),
],
),
There is a specialized widget to create even space instead of using SizedBox. Replace SizedBox with Spacer.