Related
I can't seem to figure out how to center my CircleAvatar inside the trailing component of my ListTile. Here is my code:
static Widget buildRecordCard(MyCard card, BuildContext context) {
var dateFormat = DateFormat('MM/dd/yyyy');
return Column(
children: [
ListTile(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
tileColor: Colors.white,
title: Text(
"Score: " + card.score!,
style: const TextStyle(fontSize: 38),
),
subtitle: Column(children: [
const Align(
alignment: Alignment.centerLeft,
child: Text(
"Personal Record",
style: TextStyle(fontSize: 22),
),
),
const SizedBox(height: 6),
Align(
alignment: Alignment.centerLeft,
child: Text(
dateFormat.format(card.createdOn.toDate()),
style: const TextStyle(fontSize: 18),
),
),
const SizedBox(height: 6),
]),
trailing: Container(
constraints: const BoxConstraints(minWidth: 70.0, maxWidth: 80),
height: double.infinity,
child: CircleAvatar(
radius: 35,
backgroundColor: Colors.transparent,
child: Image.asset("assets/" + card.subCategory + ".png")),
)),
const SizedBox(height: 18),
],
);
}
and here is what it is currently outputting:
I also tried to wrap my CircleAvatar in a SizedBox and in a Column with a mainAxisAlignment: MainAxisAlignment.center and it produced the same output.
You can used Transform.translate refer more about Offset
Transform.translate(
offset: Offset(0, 25),//set dy on your need
child: Container(),
),
Full Code:
trailing: Transform.translate(
offset: Offset(0, 25),
child: Container(
constraints: const BoxConstraints(minWidth: 70.0, maxWidth: 80),
height: double.infinity,
child: CircleAvatar(
radius: 35,
backgroundColor: Colors.transparent,
child: Image.network(
"https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png",
height: 50,
),
),
),
),
Result->
You can use Row widget for this. and Use alignment: Alignment.center, on Container.
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [...],
),
Container(
constraints: const BoxConstraints(minWidth: 70.0, maxWidth: 80),
alignment: Alignment.centerRight,
child: CircleAvatar(
radius: 35,
backgroundColor: Colors.red,
....
),
),
],
);
My UI currently looks like this:
I want to center the text in the middle of the space that is left over after the image is placed. However, I also want to make sure that my text does not overflow due to the size. How can I do that? My code is as follows:
Widget build(BuildContext context) {
return Card(
color: Theme.of(context).scaffoldBackgroundColor,
elevation: 0,
child: Column(
children: [
Divider(
thickness: 2,
color: Colors.white,
height: 0,
),
Row(
children: [
Container(
padding: EdgeInsets.all(0),
width: 100,
height: 100,
child: CircleAvatar(
radius: 50,
backgroundImage: NetworkImage(imageUrl),
),
),
Container(
padding: EdgeInsets.all(40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
alignment: Alignment.topCenter,
child: Text(
name,
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
Container(
alignment: Alignment.bottomLeft,
padding: EdgeInsets.all(15),
child: Text(
modalityText,
style: TextStyle(
fontSize: 10,
color: Colors.white,
),
),
),
],
),
),
],
),
],
),
);
}
Here, this is one way of doing what you want
Widget build(BuildContext context) {
return Card(
color: Theme.of(context).scaffoldBackgroundColor,
elevation: 0,
child: Column(
children: [
Divider(
thickness: 2,
color: Colors.white,
height: 0,
),
Row(
children: [
Container(
padding: EdgeInsets.all(0),
width: 100,
height: 100,
child: CircleAvatar(
radius: 50,
backgroundImage: NetworkImage("imageUrl"),
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
alignment: Alignment.topCenter,
child: Text(
"name",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
Container(
alignment: Alignment.bottomLeft,
padding: EdgeInsets.all(15),
child: Text(
"modalityText",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10,
color: Colors.white,
),
),
),
],
),
),
),
],
),
],
),
);
}
I am building an app facing a singleChildScrollView not able to scroll the page the text has been cut from bottom after the contact button i want to scroll the page but but spending so much time can't fix problem.
enter image description here
enter code here
import 'package:flutter/material.dart';
class DetailScreen extends StatefulWidget {
final electricain;
DetailScreen(this.electricain);
#override
_DetailScreenState createState() => _DetailScreenState();
}
class _DetailScreenState extends State<DetailScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 3 + 20,
width: MediaQuery.of(context).size.width,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset(
'assets/images/detail_bg.jpg',
fit: BoxFit.fill,
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.purple.withOpacity(0.1),
),
],
),
),
Positioned(
top: 50,
left: 20,
child: IconButton(
icon: Icon(
Icons.arrow_back_ios,
color: Colors.white,
),
onPressed: () {
Navigator.pop(context);
},
),
),
Positioned(
top: MediaQuery.of(context).size.height / 3.6 - 40,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(60),
),
),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 30),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 130,
),
Text(
'Description',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
SizedBox(
height: 10,
),
Text(
'${widget.electricain['desc']}',
style: TextStyle(
color: Colors.grey,
),
textAlign: TextAlign.justify,
),
SizedBox(
height: 10,
),
Text(
"\n Services List",
style: TextStyle(
fontSize: 20.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
Text(
'${widget.electricain['services']}',
style: TextStyle(
color: Colors.grey,
),
),
SizedBox(height: 30),
MaterialButton(
onPressed: () {},
color: Colors.orange,
child: Text(
"Contact",
style: TextStyle(
color: Colors.white, fontSize: 16.0),
),
),
SizedBox(height: 10),
Text(
'${widget.electricain['services']}',
style: TextStyle(
color: Colors.grey,
),
),
],
),
),
),
),
),
),
Positioned(
top: MediaQuery.of(context).size.height / 3 - 90,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 30),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 3 - 20,
height: MediaQuery.of(context).size.height / 6 + 20,
decoration: BoxDecoration(
color: widget.electricain['bgColor'],
borderRadius: BorderRadius.circular(20),
),
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Positioned(
top: 10,
right: -25,
child: Image.asset(
widget.electricain['imgUrl'],
scale: 1.7,
),
),
],
),
),
SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
widget.electricain['electricainName'],
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
SizedBox(
height: 5,
),
Text(
widget.electricain['shopName'],
style: TextStyle(
fontWeight: FontWeight.w300,
color: Colors.grey,
),
),
SizedBox(
height: 10,
),
Row(
children: <Widget>[
Icon(
Icons.star,
size: 16,
color: Color(0xffFF8573),
),
SizedBox(width: 5),
Text(
widget.electricain['rating'],
style: TextStyle(
color: Color(0xffFF8573),
),
),
SizedBox(
width: 5,
),
Text(
'(${widget.electricain['rateAmount']})',
style: TextStyle(
color: Colors.grey,
),
),
],
)
],
),
],
),
),
),
],
),
),
);
}
}
try this:
LayoutBuilder(builder: (context, constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(minWidth: constraints.maxWidth, minHeight: constraints.maxHeight),
child: IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//your children here
]
),
)
)
);
})
IntrinsicHeight class
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.
My banner is overlapping the slack widgets i need to show the ad on bottom or footer but problem is its overlapping the container need to know how can i add in end but not overlap the containers
Here is my code
body: Stack(
children: [
GestureDetector(
onTap: () {
percengtageTrigger();
API.voteplusQuestion(snapshot.data[index], 0);
},
child: Container(
height: stackHeight * 0.5,
width: stackWidth,
color: Color(0xffF9D342),
child: Column(
children: <Widget>[
shouldShow
? Container(
padding: const EdgeInsets.only(
top: 10, right: 10),
height: stackHeight * 0.1,
color: Color(0xffF9D342),
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment:
CrossAxisAlignment.end,
children: <Widget>[
Text(
'${percentage1.toStringAsFixed(0)}%',
style: TextStyle(
color: Colors.white,
fontSize: 23,
fontFamily: 'NewsCycle',
),
),
],
))
: Container(
height: stackHeight * 0.1,
color: Color(0xffF9D342),
width: double.infinity,
),
Container(
color: Color(0xffF9D342),
height: stackHeight * 0.4,
width: double.infinity,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 20),
child: Text(
snapshot.data[index].would,
style: TextStyle(
color: Color(0xff292826),
fontSize: 23,
fontWeight: FontWeight.bold,
fontFamily: 'NewsCycle',
),
),
),
],
)),
],
),
),
),
GestureDetector(
onTap: () {
percengtageTrigger();
API.voteplusQuestion(snapshot.data[index], 1);
},
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
height: stackHeight * 0.5,
width: stackWidth,
color: Color(0xff292826),
child: Column(
children: <Widget>[
shouldShow
? Container(
padding: const EdgeInsets.only(
top: 10, right: 10),
height: stackHeight * 0.1,
color: Color(0xff292826),
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment:
CrossAxisAlignment.end,
children: <Widget>[
Text(
'${percentage2.toStringAsFixed(0)}%',
style: TextStyle(
color: Colors.white,
fontSize: 23,
fontFamily: 'NewsCycle',
),
),
],
))
: Container(
height: stackHeight * 0.1,
color: Color(0xff292826),
width: double.infinity,
),
Container(
color: Color(0xff292826),
height: stackHeight * 0.4,
width: double.infinity,
child: Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(top: 40),
child: Text(
snapshot.data[index].rather,
style: TextStyle(
color: Color(0xffF9D342),
fontSize: 23,
fontWeight: FontWeight.bold,
fontFamily: 'NewsCycle',
),
),
),
],
)),
],
),
),
),
),
Align(
alignment: Alignment.center,
child: Container(
width: stackWidth,
height: stackHeight * 0.015,
color: Colors.white,
),
),
Align(
alignment: Alignment.center,
child: Container(
width: stackWidth,
height: stackHeight * 0.15,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Align(
alignment: Alignment.center,
child: GestureDetector(
onTap: () {
nextQuestion();
},
child: Text(
"SKIP",
style: TextStyle(
color: Colors.black,
fontFamily: 'FredokaOne',
fontSize: 27),
),
),
)),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
child: AdmobBanner(
adUnitId: getBannerAdUnitId(),
adSize: bannerSize,
),
),
),
],
));
As you see in the image it's overlapping the grey container I need a yellow and grey containers in same size but on top of banner no with overlap with banner.
If your content will be scrollable in the future, then I suggest you stick with the floating ad and maybe add a wide grey background to cover some space as I've seen some apps do.
Otherwise, assign it to a small row at the bottom (And assign the rest of the elements to rows as needed). The ad will take up a lot of space though so be sure to adjust the other elements accordingly.
Since you are using stack the children in the stack will overlap. If don't want them to overlap you can use other layout widgets such as Column or ListView according to your need. You can refer to flutter docs for more info on layout widgets.
I want to make my text centered inside of a Stack widget. This is what I have attempted so far. Right now, it's to the left on top of the image and that's not where I want it to be. I've tried using the Align widget and the Center widget but to no avail. What am I doing wrong?
Flexible(
child: Padding(
padding: const EdgeInsets.only(left: 8,top: 8,bottom: 8,right: 8),
child: Stack(
children: <Widget>[
Wrap(
children: <Widget>[
Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
),
],
),
Container(
width: MediaQuery.of(context).size.width/2,
height: 100,
child: Center(
child: Wrap(
children: <Widget>[
Center(
child: Container(
height: 100,
width: MediaQuery.of(context).size.width/2,
child: Align(
alignment: Alignment.center,
child: Text(
"BOOKS AND BOOKLETS",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
),
),
],
),
),
),
Any option to make this text in center
Expanded(child: Card(
child: Container(
child: Center(
child: Stack(
children: <Widget>[
Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
),
SafeArea(child: Text("asdad"))
],
),
),
),
))
Problem identifed if text size is small (means "abc") it is working but if text size is large(measn "abc abc abc acb acb abc") it is not workgingHow to solve this issue?
You can try it:
Container(
width: 500,
height: 100,
child: Stack(
children: <Widget>[
Image.network(
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
width: 500,
),
Align(
alignment: Alignment.center,
child: Text(
"BOOKS AND BOOKLETS",
style: TextStyle(
color: Colors.white,
fontSize: 11,
fontWeight: FontWeight.bold),
),
)
],
),
)
Solved
Expanded(
child: Card(
child: Container(
child: Center(
child: Stack(
children: <Widget>[
Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
),
Positioned.fill(
child:Center(child:Align(
child: Text("BOOKS AND BOOKLETS",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18,color: Colors.white),textAlign: TextAlign.center,),
alignment: Alignment.center,
)
),
)
],
),
),
),
),
),
I want at it by a different approach, what if you used a Container widget and decorate it using a background image? Then, you can avoid using a Stack widget altogether.
Here's the minimal code:
return Padding(
padding: const EdgeInsets.all(8),
child: Container(
height: 500,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
),
),
),
child: Center(
child: Text(
"hi",
style: TextStyle(color: Colors.white, fontSize: 56),
),
),
),
);
Use textAlign: TextAlign.center inside your Text Widget
using alignment: Alignment.center inside your Container Widget could also help
No need to use so many widgets just put Text widget inside Container Widget
and use alignment property of both widgets
that should resolve the issue.
Container(
width: MediaQuery.of(context).size.width/2,
height: 100,
alignment: Alignment.center,
child: Text(
"BOOKS AND BOOKLETS",
textAlign: TextAlign.center
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
)