I'm trying to put a horizontal line(currently Divider but could be changed as a CustomPaint) as a background of a Row. However, regardless of the order of children, the line always goes front of the Row. I can't figure out what's wrong. Here's the code.
Stack(
children: <Widget>[
Positioned.fill(
child: const Divider(color: Colors.black),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Ink(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.arrow_forward, size: 32)
),
),
Ink(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.location_on, size: 32)
),
),
Ink(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.flag, size: 32)
),
),
],
),
],
),
and here's the result image.
Use Container instead of Ink
Stack(
children: <Widget>[
Positioned.fill(
child: const Divider(color: Colors.black),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.arrow_forward, size: 32)
),
),
Container(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.location_on, size: 32)
),
),
Container(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.flag, size: 32)
),
),
],
),
],
);
Related
How can I create button like below,
Try below code hope its helpful to you. used Stack widget here for that
Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: circleRadius / 2.0),
child: Container(
height: 200,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Colors.white,
margin: EdgeInsets.all(
16,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 2,
height: 2,
decoration: ShapeDecoration(
shape: CircleBorder(),
color: Colors.transparent,
),
),
],
),
),
),
),
Container(
width: 100,
height: 40,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(),
color: Colors.transparent,
),
child: Padding(
padding: EdgeInsets.all(1),
child: DecoratedBox(
child: Center(
child: Text(
'Profile',
style:TextStyle(color: Colors.white,),
textAlign: TextAlign.center,
),
),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
color: Colors.blue,
),
),
),
)
],
),
Your Result screen->
Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20))),
child: TextButton(
child: Text(
"Profile",
style: TextStyle(color: Colors.white),
),
onPressed: () {},
),
),
you can use following code sample...change height according to your need...or use mediaquery for better result:
Container(
height: 275,
child: Stack(
children: [
Container(//container with background color
height: 250,
child: //other widgets
),
Positioned(
bottom: 0,
child: //button here
),
],
),
),
Flutter i have a column i am showing widgets in this. But there is one issue that container isn't showing in full screen there is some white black space remaining.
My code
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Header Image
Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(podcastInfo.artworkUrl600),
fit: BoxFit.fill,
),
),
child: Container(
margin: EdgeInsets.only(left: 10, top: 15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CustomAppBar(),
Spacer(),
],
),
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: mainHeading(podcastInfo.trackName ?? ""),
),
//Group
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
// "Overhaul Media Group",
podcastInfo.artistName,
style: TextStyle(
fontSize: 14,
color: Color(0xFF969696),
fontFamily: "Product Sans",
),
),
),
model.loading
? Container(
height: 150,
child: Center(
child: SpinKitWave(
color: Color(0xffe7ad29),
type: SpinKitWaveType.center),
),
)
: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Subscribe button
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
RaisedButton(
color: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
color: Color(0xffe7ad29)),
),
onPressed: model.isSubscribed
? () {
model.unsubPodcast();
}
: () {
model.subscribePodcast();
},
child: Text(
model.isSubscribed
? "UNSUBSCRIBE"
: "SUBSCRIBE",
style: TextStyle(
color: Colors.white,
),
),
),
///
///Share Button
RaisedButton(
color: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
color: Color(0xffe7ad29)),
),
onPressed: () {
model.sharePodcast();
},
child: Text(
"SHARE",
style: TextStyle(
color: Colors.white,
),
),
),
],
),
),
//Body text
Padding(
padding: const EdgeInsets.only(
left: 8, right: 8, bottom: 8),
child: Container(
child: Text(
// "Podcast Overhaul was created to provide you with helpful hints, tips, & strategies you need to help you get the most out of your podcast every episode...ALL in 10 minutes or less.",
model.podcast.description ?? "",
style: TextStyle(
color: Color(0xFFB0ABAB),
fontSize: 15,
fontFamily: "Sogoe UI",
),
),
),
),
///Season
Container(
decoration: BoxDecoration(
color: Color(0xffe7ad29),
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20)),
),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
SizedBox(
height:
MediaQuery.of(context).size.height *
0.02,
),
Container(
width:
MediaQuery.of(context).size.width,
padding: EdgeInsets.only(bottom: 6),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color(0xFF707070),
),
),
),
child: mainHeading("EPISODES"),
),
Column(
children: model.podcast.episodes
.map<Widget>(
(e) => Container(
width: MediaQuery.of(context)
.size
.width,
padding: EdgeInsets.only(
bottom: 6, top: 10),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color(0xFF707070),
),
),
),
child: GestureDetector(
onTap: () {
print('test');
print(podcastInfo);
print('debug');
print(e);
Navigator.pushNamed(
context,
'player',
arguments: new PlayerInfo(
item: podcastInfo,
episode: e,
),
);
},
child: mainHeading(e.title),
),
),
)
.toList(),
),
],
),
),
)
],
),
],
),
)
],
),
You can see in the screenshot its showing white empty space I try to wrap my yellow container in expanded but it's not working. I think I can sole by height but then it will scroll or some related issue will come.
Container(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Header Image
Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(podcastInfo.artworkUrl600),
fit: BoxFit.fill,
),
),
child: Container(
margin: EdgeInsets.only(left: 10, top: 15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CustomAppBar(),
Spacer(),
],
),
),
),
You can wrap column in in container and give a height using media query. On overflow you can use SinglechildScrollView also.
I want to show an image in a ListTile widget which should looks something like this.
Here is my code:
Padding(
padding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 20.0),
child: Card(
color: Colors.white,
child: ListTile(
leading: Container(
child: Image.network((orientation == Orientation.portrait
? image.portrait
: image.landscape),
fit: BoxFit.cover)
),
title: Text(terms[index].title),
subtitle: Text(terms[index].videoNumber.toString() + " Videos"),
trailing: Icon(
Icons.arrow_forward_ios,
color: Colors.lightBlueAccent,
),
),
),
);
This results in below output
What should I do so the image looks spread out as above.
You can set the padding of ListTile to 0:
...
child: ListTile(
contentPadding: EdgeInsets.all(0),
leading: ...
);
But even so, you can see that the leading only take the upper half, not the entire height of the card:
...
Card(
color: Colors.blue,
child: ListTile(
contentPadding: EdgeInsets.all(0),
leading: ...
Which result in:
You can use a Stack to include both ListTile and the leading Icons but lots of things have to be hardcorded. In this case, I recommend using ClipRRect with Row:
Padding(
padding: EdgeInsets.symmetric(
vertical: 0.0, horizontal: 20.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 70,
color: Colors.white,
child: Row(
children: <Widget>[
Container(
color: Colors.red,
width: 70,
height: 70,
child: Icon(Icons.cake, color: Colors.white),
),
SizedBox(width: 10),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text('Test Title'),
Text('Test Video',
style: TextStyle(color: Colors.grey))
],
),
),
Icon(Icons.arrow_forward_ios,
color: Colors.blue),
],
),
),
),
);
Result:
Widget buildCard(_user) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
child: Card(
color: Colors.blue.shade100,
child: Row(
children: <Widget>[
Container(
margin: const EdgeInsets.all(0),
decoration: BoxDecoration(
color: Colors.blue.shade200,
shape: BoxShape.rectangle,
borderRadius:const BorderRadius.only(
topLeft: Radius.circular(4.0),
bottomLeft: Radius.circular(4.0),
),
),
width: 20,
height: 73,
),
const SizedBox(width: 10),
Expanded(
child: ListTile(
title: Text('${_user.state?.email!.substring(0, 6)}'),
subtitle: Text('${_user.state?.createdAt}'),
),
),
//const Icon(Icons.arrow_forward_ios, color: Colors.blue),
],
),
),
),
);
}
I want the Container to take the height of the Card.
I have tried many Widgets but failed to fulfill my order,
I tried to use Flexible as a parent for the container but to no avail.
I have this code:
Card(
color: Color(0xff8c6ac9),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: Row(
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Text2'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Text3'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Text4'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Text5'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Text6'),
),
],
),
),
Container(
decoration: BoxDecoration(
color: Color(0xff9778ce),
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(10),
topRight: Radius.circular(10))),
child: Column(
children: <Widget>[
Icon(
Icons.delete,
color: Colors.white,
),
Icon(
Icons.edit,
color: Colors.white,
),
],
mainAxisAlignment:
MainAxisAlignment.spaceAround,
),
width: 40,
),
],
),
)
The output of this code is:
And what I want is:
Edit: The Card widget it is an item in ListView widget.
Thanks...
You're almost there... wrap your row with an IntrinsicHeight widget
Card(
color: Color(0xff8c6ac9),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Text2'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Text3'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Text4'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Text5'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Text6'),
),
],
),
),
Container(
decoration: BoxDecoration(
color: Color(0xff9778ce),
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(10),
topRight: Radius.circular(10))),
child: Column(
children: <Widget>[
Icon(
Icons.delete,
color: Colors.white,
),
Icon(
Icons.edit,
color: Colors.white,
),
],
mainAxisAlignment:
MainAxisAlignment.spaceAround,
),
width: 40,
),
],
),
),
),
You can use the IntrinsicHeight widget since your Card doesn't have a predefined height.
A widget that sizes its child to the child's intrinsic height.
This class is useful, for example, when unlimited height is available and you would like a child that would otherwise attempt to expand infinitely to instead size itself to a more reasonable height.
Note: This class is relatively expensive, because it adds a speculative layout pass before the final layout phase. Avoid using it where possible. In the worst case, this widget can result in a layout that is O(N²) in the depth of the tree.
ListView.builder(
itemBuilder: (context, index) {
// wrapped the card widget with an intrinsic height
return IntrinsicHeight(
child: Card(
color: Color(0xff8c6ac9),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: Row(
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Text2'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Text3'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Text4'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Text5'),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Text6'),
),
],
),
),
Container(
decoration: BoxDecoration(
color: Color(0xff9778ce),
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(10),
topRight: Radius.circular(10))),
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Icon(
Icons.delete,
color: Colors.white,
),
Icon(
Icons.edit,
color: Colors.white,
),
],
mainAxisAlignment: MainAxisAlignment.spaceAround,
),
width: 40,
),
],
),
),
);
},
),
OUTPUT:
I am trying to retrieve data from database ..in question contain 128 word which is showing me overflow by 533 pl...how can i resolved that ..below is my code
#
text code
Padding(
padding: EdgeInsets.only(top: 2.0,),
child:Text(questonnd.question,textAlign: TextAlign.justify,overflow: TextOverflow.fade, style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueGrey,),),
),
my full code
new GestureDetector(
child: new Card(
elevation: 2.0,
margin: const EdgeInsets.all(5.0),
child:
new Stack(
alignment: Alignment.center,
children: <Widget>[
new Align(
child: new Row(
children: <Widget>[
Column(
children: <Widget>[
Text(questonnd.rate.toString()),
Stack(
children: <Widget>[
Padding(padding: EdgeInsets.all(6.0),
child: new Container(
child: Center(
child: Text("${questonnd.comment}"),
),
width: 20.0,
height: 20.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new AssetImage("assets/comment.png")),
),
margin: const EdgeInsets.symmetric(
horizontal: 20.0),
),)
//
],
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 2.0,),
child:Text(questonnd.question,textAlign: TextAlign.justify,overflow: TextOverflow.fade, style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueGrey,),),
),
Row(
children: <Widget>[
questonnd.releventTag!=null?new Container(
decoration: new BoxDecoration(
color: Colors.greenAccent,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(6.0)
),
margin: const EdgeInsets.symmetric(
horizontal: 20.0),
child: Padding(padding: EdgeInsets.all(3.0),
child: Text(questonnd.releventTag,style: TextStyle(color: Colors.white),),),
):questonnd.releventTag2!=null?new Container(
decoration: new BoxDecoration(
color: Colors.black54,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(2.0)
),
margin: const EdgeInsets.symmetric(
horizontal: 20.0),
child: Padding(padding: EdgeInsets.all(3.0),
child: Text(questonnd.releventTag2,style: TextStyle(color: Colors.white),),),
):questonnd.releventTag3!=null?new Container(
decoration: new BoxDecoration(
color: Colors.black54,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(2.0)
),
margin: const EdgeInsets.symmetric(
horizontal: 20.0),
child: Padding(padding: EdgeInsets.all(3.0),
child: Text(questonnd.releventTag3,style: TextStyle(color: Colors.white),),),
):new Container(),
questonnd.releventTag4!=null?Row(
children: <Widget>[
Icon(Icons.message),
Text(questonnd.releventTag4.toString())
],
):new Container()
],
),
questonnd.releventTag5!=null?Padding(padding: EdgeInsets.all(2.0),
child: Row(
children: <Widget>[
Icon(Icons.remove_red_eye),
Text(questonnd.releventTag5.toString())
],
),):new Container()
],
)
],
),
alignment: Alignment.bottomCenter,
),
],
),
),
onTap: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (context)=>new Fullscreenquestion(questionNd: questonnd,)));
},
);
}
}
You should try wrapping your child into a Container with a fixed width. It happened to me here: Flutter- wrapping text and while it requires some workaround to set width in a platform-independent way it also works.