FittedBox not allowing to set specific font size - flutter

I have used a FittedBox() for Text widget and the issue is I could not set font size of my choice. I have tried some specific font sizes but the font remains same. Here is the screenshot of UI I am talking about Image1, highlighted with blue color.
This is the code snippet.
Container(
color: Colors.black,
width: double.infinity,
constraints: BoxConstraints(minHeight: 30),
padding: EdgeInsets.symmetric(horizontal: 5),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
color: Colors.blue,
child: FittedBox(
fit: BoxFit.contain,
child: Text(
'Qty',
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.white,
),
),
),
),
),
Container(
width: 10,
child: VerticalDivider(
color: Colors.white,
),
),
Expanded(
flex: 2,
child: Container(
alignment: Alignment.center,
// color: Colors.blue[200],
child: FittedBox(
fit: BoxFit.contain,
child: Text(
'Description',
style: TextStyle(
color: Colors.white,
// fontSize: textSize,
),
),
),
),
),
Container(
width: 10,
child: VerticalDivider(
color: Colors.white,
),
),
Expanded(
child: Container(
//width: MediaQuery.of(context).size.width * 0.07,
alignment: Alignment.center,
child: FittedBox(
fit: BoxFit.contain,
child: Text(
'Price',
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
),
),
),
),
Container(
width: 10,
child: VerticalDivider(
color: Colors.white,
),
),
Expanded(
child: Container(
// width: MediaQuery.of(context).size.width * 0.07,
alignment: Alignment.center,
child: FittedBox(
fit: BoxFit.contain,
child: Text(
'Extend',
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
),
),
),
),
],
),
),
I have also tried to reduce the widget height using BoxConstraints property but it is also not working. Anyone help me please to solve this issue.

Related

i am continuously being wrong with this data overflow

I want to display the text under the images. I am able to see the Images and text, but My text is overflowing. I want to display it on each text under each image. Below is my code.
What should I do to solve this situation.
Widget firstStyleRow(String ImgPath1, String ImgPath2, String avatarImg) {
return Container(
height: 250.0,
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Row(
children: [
Container(
height: 250.0,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: Column(
children: [
Container(
height: 125.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage(ImgPath1),
fit: BoxFit.cover,
),
),
),
SizedBox(
height: 15.0,
),
Text(
'i like the wy to show more item',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
height: 30.0,
width: 30.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: AssetImage('assets/chris.jpg'),
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'mon hll',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
Text(
'10:28 pm',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
],
),
),
SizedBox(
width: 10.0,
),
Container(
height: 350,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: Container(
height: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage('assets/letter.jpeg'),
fit: BoxFit.cover,
),
),
),
),
SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
'i hvxxxx',
style: TextStyle(
fontSize: 50,
),
),
),
],
),
);
}

Try below code hope its help to you.add your inside row widget wrap it with Expanded or Flexible, just change my images with your images
Container(
height: 250.0,
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Row(
children: [
Expanded(
child: Container(
height: 250.0,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: SingleChildScrollView(
child: Column(
children: [
Container(
height: 125.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(
'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png'),
fit: BoxFit.cover,
),
),
),
SizedBox(
height: 15.0,
),
Text(
'i like the wy to show more item',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Container(
height: 30.0,
width: 30.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: NetworkImage(
'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png'),
),
),
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'mon hll',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
Text(
'10:28 pm',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
],
),
),
),
),
SizedBox(
width: 10.0,
),
Container(
height: 350,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: Container(
height: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(
'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png'),
fit: BoxFit.cover,
),
),
),
),
SizedBox(
height: 5,
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
'i hvxxxx',
style: TextStyle(
fontSize: 50,
),
),
),
),
],
),
),
Your result screen->

Adding an image background to home page

I am trying to add a background to my home page, however, it does not seem to be working. Any thoughts? I know how to add it per se, but unsure of how to structure it. I had received some advice to use a Stack, but I am unfamiliar with this method and the resources online are not clear.
Any advice on how to structure this would be appreciated.
Here is the background image code:
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/startbackground.jpg"),
fit: BoxFit.cover),
),
and here is the page code itself.
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.orangeAccent,
height: double.infinity,
width: double.infinity,
alignment: Alignment.bottomLeft,
child: UnconstrainedBox(
child: Padding(
padding: const EdgeInsets.only(left: 50, bottom: 50),
child: Container(
height: 400,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
child: Text(
"Text",
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
color: Colors.purpleAccent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60, fontWeight: FontWeight.w700),
),
color: Colors.purpleAccent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60, fontWeight: FontWeight.w700),
),
color: Colors.teal,
),
),
Expanded(
flex: 2,
child: Padding(
padding: EdgeInsets.all(15),
child: FlatButton(
minWidth: 200,
onPressed: () {},
child: Text(
"Get Started",
style:
TextStyle(color: Color(0xff7638c9), fontSize: 15),
),
color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.purple),
borderRadius: BorderRadius.circular(18.0),
),
),
),
),
],
),
),
),
),
),
);
}
}

It's confusing, but we don't actually need a DecoratedBox, rather a BoxDecoration (inside your container, for the decoration: argument).
:P
Here's an example:
class BackgroundImagePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
color: Colors.orangeAccent, // this has been moved up into BoxDeco
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://i.pravatar.cc/300'
)
)
),
height: double.infinity,
width: double.infinity,
... <snip> ...

If the Scaffold is a child of the background image code, than I guess the Scaffold background color is hiding the image.
Set transparent background color for the Scaffold:
Scaffold(
backgroundColor: Color.transparent,
...

This ended up working. See below.
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(children: <Widget>[
Image.asset(
"assets/startbackground.jpg",
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Scaffold(
body: Container(
color: Colors.transparent,
height: double.infinity,
width: double.infinity,
alignment: Alignment.bottomLeft,
child: UnconstrainedBox(
child: Padding(
padding: const EdgeInsets.only(left: 50, bottom: 50),
child: Container(
height: 400,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
child: Text(
"Text",
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
color: Colors.transparent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60,fontWeight: FontWeight.w700),
),
color: Colors.transparent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60, fontWeight: FontWeight.w700),
),
color: Colors.transparent,
),
),
Expanded(
flex: 2,
child: Padding(
padding: EdgeInsets.all(15),
child: FlatButton(
minWidth: 200,
onPressed: () {},
child: Text(
"Get Started",
style: TextStyle(
color: Color(0xff7638c9), fontSize: 15),
),
color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.purple),
borderRadius: BorderRadius.circular(18.0),
),
),
),
),
],
),
),
),
),
),
)
]);
}
}

SingleChildScrollView not working in Column

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.

How to make text center inside stack

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,
),
),
)

Flutter Layout :- how to build this layout

I want to align the text to the center inside the image as shown in the image.
I recently started working with flutter please help me to achieve the layout.
Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.fromLTRB(24, 20, 24, 0),
child: Stack(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Image.asset(
'assets/images/car.jpg',
fit: BoxFit.cover,
),
),
Positioned.fill(
child: Align(
alignment: Alignment.center,
child: Text(
'Cars',
style: TextStyle(
fontFamily: 'Welcome',
fontSize: 30,
color: Colors.white),
),
),
)
],
),
)
With the help of the above code, the text is appearing in the bottom-center instead of the center.

return Container(
width: MediaQuery
.of(context)
.size
.width,
margin: EdgeInsets.fromLTRB(24, 20, 24, 0),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Image.asset(
Images.image1,
fit: BoxFit.cover,
),
),
Text(
'Cars',
style: TextStyle(
fontFamily: 'Welcome',
fontSize: 30,
color: Colors.white),
)
],
),
);