I'm trying to place a text countdown timer in the center of a CircularProgressIndicator. This is the code for the layout of the body:
return new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 200,
height: 200,
child: new CircularProgressIndicator(
strokeWidth: 15,
value: value,
),
),
Align(
alignment: FractionalOffset.center,
child: Text("Test")
)
],
),
...
],
);
Adding the Align() widget changes the layout from this:
to this:
I've also tried
Align(
alignment: Alignment.center,
child: Text("Test")
)
and
Center(
child: Text("Test"),
)
instead of the Align() widget, but they all produce the same result
That's because your Stack doesn't have size, so to fix your issue, wrap your Stack inside SizedBox, set a height, and Center the Text.
Column(
children: <Widget>[
SizedBox(
height: 200.0,
child: Stack(
children: <Widget>[
Center(
child: Container(
width: 200,
height: 200,
child: new CircularProgressIndicator(
strokeWidth: 15,
value: 1.0,
),
),
),
Center(child: Text("Test")),
],
),
),
],
)
Use Positioned They are meant to be used with Stacks.
As per documentation:
A Positioned widget must be a descendant of a Stack, and the path from the Positioned widget to its enclosing Stack must contain only StatelessWidgets or StatefulWidgets (not other kinds of widgets, like RenderObjectWidgets).
Also, don't forget to wrap your Stack inside a Container or Center so as to put constraints to the box.
Column(
children: <Widget>[
SizedBox(
height: 40,
child: Stack(
children: <Widget>[
Container(
width: 40,
height: 40,
child:
new CircularProgressIndicator(
value: 10,
color: Colors.red,
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
top: 15,
child: Text(
bytesDownload!,
textAlign:
TextAlign.center,
style: TextStyle(
fontSize: 10,
),
)),
],
),
),
],
)
Just Wrap it inside a SizedBox()
https://i.stack.imgur.com/fJfaL.png
Related
I am using the Stack widget in my app and it is working great but now I have a problem with wrapping this Stack widget inside ListView Widget.
I am getting error
RenderBox was not laid out: RenderPointerListener#20d10 relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'
My Stack Widget is
Widget? stackW() {
return Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned(
top: 70,
width: MediaQuery.of(context).size.width * .9,
height: 150,
child: Center(
child: Container(
width: MediaQuery.of(context).size.width * .9,
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(15)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
"Product Designer",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
const SizedBox(
height: 10,
),
],
),
),
),
),
Positioned(
top: 30,
left: MediaQuery.of(context).size.width / 2.5,
width: 80,
height: 80,
child: CircleAvatar(
backgroundColor: Colors.white,
child: CircleAvatar(
backgroundColor: Colors.green[100],
radius: 35,
child: const FaIcon(
FontAwesomeIcons.apple,
size: 30,
color: Colors.black,
),
),
),
),
],
);
}
When I am passing stackWidget directly in body then it is working fine but after wrapping inside ListView, it is creating problem.
so Please guide me to achieve my listview data with Stack Widget.
body: stackW()!, //working
body: ListView(
scrollDirection: Axis.vertical,
children: [
stackW()!,
],
),
``` //not working
Both widgets are getting infinite height, you can wrap stackW() with SizedBox widget.
body: LayoutBuilder(
builder: (context, constraints) => ListView(
scrollDirection: Axis.vertical,
children: [
SizedBox(
height: constraints.maxHeight,
width: constraints.maxWidth,
child: stackW()!,
)
],
),
),
I'm trying to display items in the card vertically, but in the card content I'm facing an issue that is, "Bottom overflowed by 52 pixels".
Here, I'm attaching code, my design's screenshot, and the screenshot of what actually I need.
Please help!
Below is my code.
Widget buildRowItemsGrid(BuildContext context, int index) {
FlutterMoneyFormatter formatter =
FlutterMoneyFormatter(amount: items[index].price);
return Container(
child: Card(
elevation: 5.0,
margin: EdgeInsets.all(8.0),
child: Column(
children: [
Container(
child: Image.network(
"https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/118898040/original/870e2763755963f5a300574bbea5977fa8b18460/sell-original-football-and-basketball-teams-jersey.jpg",
width: 100,
height: 100,
fit: BoxFit.fill),
),
Column(
children: [
Container(
child: Text(items[index].title,
style: titleTextStyle,
maxLines: 2,
overflow: TextOverflow.ellipsis),
margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
child: Text(items[index].subtitle,
style: subtitleTextStyle)),
),
Container(
margin: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(formatter.output.symbolOnLeft,
style: priceTextStyle),
Text("ADD TO CART", style: addToCardTextStyle)
],
),
)
],
),
],
),
),
);
Code of Grid View
Widget buildGridView() {
return Expanded(
child: GridView.count(
crossAxisCount: 2,
scrollDirection: Axis.vertical,
physics: PageScrollPhysics(),
shrinkWrap: true,
children: List.generate(items.length, (index) {
return buildRowItemsGrid(context, index);
})),
);
You need to set an appropriate childAspectRatio in the GridView like this.
GridView.count(
crossAxisCount: 2,
childAspectRatio: 2/3, //<-- width/height ratio depending on the child's content. Set accordingly.
//...
)
Edit:
The above part will solve the overflow problem. In addition to that, you can make the size of the Image widget adaptive like this so it can take up more space when available.
Image.network(
"https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/118898040/original/870e2763755963f5a300574bbea5977fa8b18460/sell-original-football-and-basketball-teams-jersey.jpg",
width: MediaQuery.of(context).size.width / 2.8,
height: MediaQuery.of(context).size.width / 2.8,
fit: BoxFit.fill,
)
You can also set the Column's mainAxisAlignment to spaceEvenly so its children can take up the space evenly when more space is available vertically.
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//...
)
I can't see the ScreenShot, but from the code I suggest you wrap The Second Column with Expanded and then the first column wrap it with SingleChildScrollView, that way it won't overflowed and you can scroll through if the contain inside were higher
I guess you have a fixed size for your Grid item. So it will overflow if the height of the Grid is not enough.
I have two ideas for you:
Use auto_size_text https://pub.dev/packages/auto_size_text
Expanded(
child: AutoSizeText(
'The text to display',
style: TextStyle(fontSize: 20),
maxLines: 2,
minFontSize: 1,
),
)
Increase the height of your Grid.
Would it work? Have you given it some fixed height in its parents? If given remove that, and then try this.
Widget buildRowItemsGrid(BuildContext context, int index) {
FlutterMoneyFormatter formatter =
FlutterMoneyFormatter(amount: items[index].price);
return Container(
child: Card(
elevation: 5.0,
margin: EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
child: Image.network(
"https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/118898040/original/870e2763755963f5a300574bbea5977fa8b18460/sell-original-football-and-basketball-teams-jersey.jpg",
width: 100,
height: 100,
fit: BoxFit.fill),
),
Column(
children: [
Container(
child: Text(items[index].title,
style: titleTextStyle,
maxLines: 2,
overflow: TextOverflow.ellipsis),
margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
child: Text(items[index].subtitle,
style: subtitleTextStyle)),
),
Container(
margin: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(formatter.output.symbolOnLeft,
style: priceTextStyle),
Text("ADD TO CART", style: addToCardTextStyle)
],
),
)
],
),
],
),
),
);
Try wrapping the overflowing widget with a Flexible widget. The child of the Flexible widget will fill the available space in the main axis.
I am trying to put an edit Icon on the right top side next to a centered Circle Avatar. But if I use a Center Widget inside of a Row Widget it does not work:
Row(
children: <Widget>[
Center(
child:
CircleAvatar(
radius: 70,
backgroundImage: NetworkImage(
""),
),
),
Icon(Icons.edit),
],
)
and if I center the Rows Content with mainaxisalignment, it does not center the avatar but the avatar together with the Icon:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
radius: 70,
backgroundImage: NetworkImage(
"https://autix.ch/wp-content/uploads/profile-placeholder.png"),
),
Icon(Icons.edit),
],
),
It should look like this:
Try to use a Stack:
Container(
width: 200,
height: 200,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: Icon(Icons.access_time),
),
Container(
width: 200,
height: 200,
child: CircleAvatar(
child: Text('Avatar'),
),
),
],
),
),
Result:
You can wrap the edit Icon with a Container Widget and align this to the topRight like this:
Container(
height: 140,
alignment: Alignment.topRight,
child: Icon(Icons.edit),
),
You can do it without container:
CircleAvatar(
backgroundImage: NetworkImage(photoURL),
child: Stack(
children: [
Align(
alignment: Alignment.topRight,
child: Icon(Icons.ac_unit),
)
],
),
),
I tried doing this, but it ended up one upon another. The CircularProgressIndicator was stacked upon one another instead of being inside as I have tried in the following code:
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 200,
width: 200,
child: Column(
children: <Widget>[
CircularProgressIndicator(
backgroundColor: Colors.pinkAccent,
strokeWidth: 30.0,
value: 0.7,
valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
),
SizedBox(
height: 150,
width: 150,
child: CircularProgressIndicator(
backgroundColor: Colors.red,
strokeWidth: 10.0,
value: 0.7,
valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
),
),
],
),
),
],
),
),
You have to stack these widgets on top of each other with Stack widget
Stack(
children: <Widget>[
SizedBox(
height: 200,
width: 200,
child: CircularProgressIndicator(
backgroundColor: Colors.pinkAccent,
strokeWidth: 30.0,
value: 0.7,
valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
),
),
Positioned(
left: 25,
top: 25,
child: SizedBox(
height: 150,
width: 150,
child: CircularProgressIndicator(
backgroundColor: Colors.red,
strokeWidth: 10.0,
value: 0.7,
valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
),
),
)
],
),
OUTPUT
I'm trying to develop a Card with some text widget beneath it. Look at the image below.
The problem I'm facing is when the text next to location icon is large, it overflows. I've tried with Flex, but it throws an exception. There's also a star icon at the right bottom of the card.
Here's what I want :
I want the text to be single line ending with .. if it's too long.
star should be placed at the bottom right
The location icon doesn't consider the left padding I gave (Padding widget)
Please help! Thanks in advance.
Here's my code :
Scaffold buildOffersList(OfferModel offerModel) {
return Scaffold(
body: Stack(
children: <Widget>[
Center(
child: Image.network(
'https://b.zmtcdn.com/data/pictures/2/19250332/0fe23bee17b60d181fd43421ca3480d4_featured_v2.jpg',
fit: BoxFit.cover,
width: size.width,
height: size.height,
color: Colors.black.withOpacity(.6),
colorBlendMode: BlendMode.darken
),
),
Column(
children: <Widget>[
Container(
child: PageHeader(pageTitle: 'Popular Offers', numberOfOffers: '20 venues', sortByText: 'Sort By: Location', filterText: 'Filter'),
),
Expanded(
child: GridView.count(
crossAxisCount: 2,
mainAxisSpacing: 5.0,
crossAxisSpacing: 5.0,
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
children: List.generate(offerModel.payload.offers.length, (index) {
return Center(
child: offerCard3(offerModel.payload.offers[index]),
);
}),
),
),
],
),
],
)
);
}
Widget offerCard3(Offer offer) {
return GestureDetector(
child: Card(
elevation: 1.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
AspectRatio(
aspectRatio: 18.0 / 8.0,
child: Image.network(
"https://b.zmtcdn.com/data/pictures/2/19250332/0fe23bee17b60d181fd43421ca3480d4_featured_v2.jpg",
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(7.0, 5.0, 4.0, 5.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
getBrandName(offer),
getOfferTitle(offer),
SizedBox(height: 15.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
getLocationIcon(),
getOfferContactAddressView(offer),
],
),
getKmText(),
],
),
//Spacer(),
getStarIcon(),
],
),
],
),
),
],
),
),
);
}
Text getOfferContactAddressView(Offer offer) {
return Text(
offer.offerContactAddress,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black38,
fontSize: 9.0,
),
);
}
Icon getStarIcon() {
return Icon(
Icons.star,
color: Colors.orange,
size: 25,
);
}
There is a flutter package for auto resize text to contain the full text.
auto_size_text 2.1.0 here
FIrst Solution Highly Recommend
First of all, you can use Listtile.
ListTile(title: Text("ListTile"),
subtitle: Text("Sample Subtitle. \nSubtitle line 3"),
trailing: Icon(Icons.home),
leading: Icon(Icons.add_box),
isThreeLine: true,
)
Second Solution
SizedBox(
width: 500,
child: new Text(
'Text largeeeeeeeeeeeeeeeeeeeeeee',
//Overflow: TextOverflow.ellipsis will make you large text end with ....
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontSize: 13.0,
),
),
),
I think you have to use like below code:-
Expanded(
child: Wrap(
direction: Axis.horizontal,
runAlignment: WrapAlignment.start,
children: <Widget>[
getOfferContactAddressView(offer),
],
),
flex: 1,
),
It happens because the Text Widget doesn't know how big the width of the Row.
Please try this code out DartPad to help you find where you went wrong with your code. I still believe, wrapping the Text Widget with Expanded and give overflow property will give what you want right away.
Here's the SS of it: