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"),
],
)),
)
],
),
);
}),
Related
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,
),
),
],
),
),
),
),
);
enter image description here
I need to achieve this programmatically in flutter for all tabs and mobile screens.
Try with following basic code, you can customise as your requirement
Stack(
children: [
Container(
height: 32,
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.tealAccent, width: 2),
),
),Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 32,
width: 32,
margin: const EdgeInsets.all(0),
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.tealAccent, width: 2),
),
alignment: Alignment.center,
child: const Icon(Icons.arrow_back_ios, size: 24, color: Colors.tealAccent,)),
Text('Your Text Here'),
Container(
height: 32,
width: 32,
margin: const EdgeInsets.all(0),
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.tealAccent, width: 2),
),
alignment: Alignment.center,
child: const Icon(Icons.arrow_forward_ios, size: 24, color: Colors.tealAccent,))
],
)
],
)
try this.
Transform.scale(
scale: .5,
child: const SizedBox(
width: 100,
height: 100,
child: FlutterLogo(),
),
),
U gotta do it manually by fixing the Height. i did one for u.
class FirstScreen extends StatelessWidget {
const FirstScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 60,
width: double.infinity,
child: Stack(
children: [
Positioned(
top: 0,
bottom: 0,
left: 40,
right: 40,
child: Container(
constraints: const BoxConstraints.expand(),
decoration: BoxDecoration(
border: Border.all(color: Colors.cyan, width: 2),
),
child: const Center(child: Text('Hello man')),
),
),
Positioned(
top: 0,
left: 0,
bottom: 0,
width: 80,
child: _icon(Icons.arrow_back_ios_new),
),
Positioned(
top: 0,
right: 0,
width: 80,
bottom: 0,
child: _icon(Icons.arrow_forward_ios),
),
],
),
),
),
);
}
Widget _icon(IconData icon) => Container(
constraints: const BoxConstraints.expand(),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
border: Border.all(color: Colors.cyan, width: 2),
boxShadow: [
BoxShadow(
color: Colors.grey[200]!,
spreadRadius: 1,
blurRadius: 20,
),
BoxShadow(
color: Colors.grey[300]!,
spreadRadius: 1,
blurRadius: 20,
)
],
),
child: Icon(
icon,
color: Colors.cyan,
),
);
}
Long story short I have a stack, in which I have an image that is position out of the stack.
body: Column(
children: [
Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
_positionedImage(),
],
),
_bodyContainer(),
],
container:
Widget _bodyContainer() {
return Container(
width: MediaQuery.of(context).size.width,
height: 200,
decoration: BoxDecoration(
color: itsyBackground,
borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
boxShadow: [BoxShadow(offset: Offset(0, 0), color: Colors.green, spreadRadius: 1, blurRadius: 1),],
),
);
}
How can I make so that picture is on top of the container?
the approach that you used is wrong here.. You don't need a column here. You can simply render a stack an the bottom most widget should be placed first in the stack children.
https://medium.com/flutter-community/a-deep-dive-into-stack-in-flutter-3264619b3a77
An Example:
Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20)),
boxShadow: [
BoxShadow(
offset: Offset(0, 0),
color: Colors.green,
spreadRadius: 1,
blurRadius: 1),
],
),
),
Positioned(
top: -10,
child: Image.network(
'https://static.toiimg.com/thumb/msid-31346158,width-748,height-
499,resizemode=4,imgsize-114461/.jpg',
width: 100,
),
),
],
),
I can't seem to figure out why my container keeps being full screen. I'm trying to make the containers have a max width so when its viewed on a desktop the containers look like cards kinda like they would if it was viewed on a phone screen.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
int currentPage = 0;
class MyApp extends StatelessWidget {
final PageController ctrl = PageController(viewportFraction: 0.8);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Builder(
builder: (context) => PageView(
scrollDirection: Axis.vertical,
controller: ctrl,
children: [
Container(
width: MediaQuery.of(context).size.width * .80,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.orange,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.red,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
],
),
),
),
);
}
}
Here is an image of what the container is doing.
Problem
And here is what I want it to look like when viewed on a desktop
What I'm Trying To Do
I Also tried adding constants like this and that didn't work either.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
int currentPage = 0;
class MyApp extends StatelessWidget {
final PageController ctrl = PageController(viewportFraction: 0.8);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Builder(
builder: (context) => PageView(
scrollDirection: Axis.vertical,
controller: ctrl,
children: [
Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height /4,
maxWidth: MediaQuery.of(context).size.width * 0.8,),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.orange,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
Container(
margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.red,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
blurRadius: 500,
offset: Offset(10, 10))
]),
),
],
),
),
),
);
}
}
Could someone help me do this?
Thank you!
Put PageView Inside a container and give constraints to that container.
I need to add shadow in my image. Just on image not the other container i try but its not showing shadow
Here is my code
return Container(
margin: EdgeInsets.only(left: 40),
width: MediaQuery.of(context).size.width * 0.5,
child: ListView.builder(
itemCount: _places.length,
itemBuilder: (ctx, int index) {
return Container(
padding: EdgeInsets.only(top: 50),
child: Column(
children: <Widget>[
Text(_places[index]['name'], style: TextStyle(fontSize: 20),),
Container(
padding: EdgeInsets.only(top: 20),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10)
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
width: 200,
child: Image(image: AssetImage('assets/images/500place.jpg')),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 7),
child: Row(
children: <Widget>[
Icon(Icons.favorite_border, size: 20),
Spacer(),
Text(
_places[index]['where'],
),
],
)
),
],
),
);
}),
);
As you see the result of the output screen I need to show the light shadow on image only i added the box shadow in container but its not working on image only
Wrap it with a Card..that will give you the elevation(shadow)..
You can do it like this..
Card(
child: Container(),
elevation: 20.0, // give it according to your requirement
),
For a single shadow line
Card(
child: Container(
width: double.infinity,
height: 1,
),
elevation: 1.0, // give it according to your requirement
)