big text in title and trailing - flutter

My code prints device characteristics. But if the text is too long, then the text is displayed ugly(as in the photo 1). I tried to fix it in different ways, but only title changes for me, trailing remains unchanged.
Can it be done in this way, if the text is long, then title is displayed in one line, and the next trailing (as in the photo 2)?
body: SingleChildScrollView(
child: Align(
alignment: Alignment.topCenter,
child: Column(
children: [
Container(
constraints: const BoxConstraints(maxWidth: 800),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),
),
child: Card(
child: Column(
children: [
ListTile(
title: const Text('Brand:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.brand} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
const Divider(color: Colors.black, endIndent: 10, indent: 10),
ListTile(
title: const Text('Operation system:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.operation_system} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
const Divider(color: Colors.black, endIndent: 10, indent: 10),
ListTile(
title: const Text('Version of OS:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.version_OS} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
const Divider(color: Colors.black, endIndent: 10, indent: 10),
],
),
),
),
]
)
)
)


One option would be to remove trailing from ListTile and use RichText and TextSpan for title like so:
ListTile(
title: RichText(
text: TextSpan(
style: Theme.of(context).textTheme.headline6,
children: [
const TextSpan(
text: 'Version of OS: ',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 25,
),
),
TextSpan(
text: '${device.version_OS}',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 20,
),
),
],
),
),
),


Try below code hope its helpful to you.
Card(
child: ListTile(
leading: Text(
'Version of OS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 20,
overflow:TextOverflow.ellipsis,
),),
title: Text('Your version with version 1.0'),
trailing: Text('Nokia'),
),
),

Related

Fixing sides of a Card in a Flutter Project

I am trying to fix the sides of the card as on 1 side it is touching the boarder and on the other it is very far from it. I have tried several options but it is not solving my issue. I have also tried to shorten the width of the TextField but I was not able to do it.
Here is the messed outcome that I have:
Here is the code for the card:
Card(
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: const Color(0xFFF4F6FD),
margin:
const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FutureBuilder<List<Article_details_Model>>(
future: futureArticle_details,
builder: (BuildContext context,
AsyncSnapshot<List<Article_details_Model>> snapshot) {
if (snapshot.hasData) {
return Column(
children: List.generate(
snapshot.data!.length,
(index) => Column(
children: [
const Gap(10),
Text(
snapshot.data![index].name,
textAlign: TextAlign.start,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
const Gap(10),
Table(
children: [
const TableRow(children: [
Text(
'No.',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
Text(
'Counts',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
Text(
'Last Order',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
Text(
'New Counts',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
Text(
'New Order',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
)
]),
// Iterate over the sequences list and display the sequence information
for (var sequence
in snapshot.data![index].sequences)
TableRow(children: [
Text(
'${sequence.no}',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
Text(
'${sequence.counts}',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
Text(
'${sequence.order}',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
TextField(
keyboardType:
TextInputType.number,
decoration: InputDecoration(),
),
TextField(
keyboardType:
TextInputType.number,
decoration: InputDecoration(),
),
])
],
),
],
),
),
);
} else if (snapshot.hasError) {
print(snapshot.error);
return Text('${snapshot.error}');
}
return const CircularProgressIndicator();
},
),
],
),
),
My question
How can I fix the sides of the card so that it can have a little space and how can I decrease the width of the textfield.

Use padding :
Card(
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: const Color(0xFFF4F6FD),
margin:
const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
child:
Padding(
padding: const EdgeInsets.all(18.0), //change here
child :Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FutureBuilder<List<Article_details_Model>>(
future: futureArticle_details,
builder: (BuildContext context,
AsyncSnapshot<List<Article_details_Model>> snapshot) {
if (snapshot.hasData) {
return Column(
children: List.generate(
snapshot.data!.length,
(index) => Column(
children: [
const Gap(10),
Text(
snapshot.data![index].name,
textAlign: TextAlign.start,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
const Gap(10),
Table(
children: [
const TableRow(children: [
Text(
'No.',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
Text(
'Counts',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
Text(
'Last Order',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
Text(
'New Counts',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
Text(
'New Order',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
)
]),
// Iterate over the sequences list and display the sequence information
for (var sequence
in snapshot.data![index].sequences)
TableRow(children: [
Text(
'${sequence.no}',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
Text(
'${sequence.counts}',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
Text(
'${sequence.order}',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
TextField(
keyboardType:
TextInputType.number,
decoration: InputDecoration(),
),
TextField(
keyboardType:
TextInputType.number,
decoration: InputDecoration(),
),
])
],
),
],
),
),
);
} else if (snapshot.hasError) {
print(snapshot.error);
return Text('${snapshot.error}');
}
return const CircularProgressIndicator();
},
),
],
),)
),

Align text vertically flutter

I think the best way to explain my issue is with images, so this is what I want to achieve, dont mind the styling of either image.
But when I try to implement it myself, the bottom text gets indented.
Here are my code. Note I am new to flutter, so tips are also appreciated.
SizedBox(
width: 580,
height: 95,
child: Material(
color: panelBackground,
borderRadius: BorderRadius.circular(5),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
const Text(
"Project Name",
style: TextStyle(
fontSize: 36,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 5),
RichText(
text: const TextSpan(
text: "Made by: ",
style: TextStyle(
fontSize: 14,
color: Color(0xFF838383),
),
children: [
TextSpan(
text: '/',
style: TextStyle(
color: Colors.amber,
fontWeight: FontWeight.bold)),
TextSpan(
text: '6u5t4v',
style: TextStyle(
color: Colors.amberAccent,
letterSpacing: 2,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic))
])),
],
),
Column(
children: [Text("rating here")],
),
const SidebarIcon(
icon: Icon(Icons.save),
)
],
),
),
),
),

Just set crossAxisAlignment to start
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Project Name",
style: TextStyle(
fontSize: 36,
color: Colors.white,
fontWeight: FontWeight.w600,
),
),

you have to warp Text with Align Widget and given following code
Align(alignment:Alignment.topLeft, child:"your Widget")

How to make rich text align vertical center in flutter?

import 'package:flutter/material.dart';
class DraftPage extends StatefulWidget {
DraftPage({Key key}) : super(key: key);
#override
_DraftPageState createState() => _DraftPageState();
}
class _DraftPageState extends State<DraftPage> {
#override
Widget build(BuildContext context) {
final bottomTextStyle = TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Colors.red,
);
return Scaffold(
appBar: AppBar(
title: Text('Test'),
),
body: Container(
alignment: Alignment.center,
width: 300,
height: 57,
decoration: BoxDecoration(
color: Colors.yellow,
),
child: Text.rich(
TextSpan(
children: [
TextSpan(
text: 'AB',
style: bottomTextStyle,
),
TextSpan(
text: 'CD',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.w500,
color: Colors.blue,
),
),
TextSpan(
text: 'EF',
style: bottomTextStyle,
),
],
),
textAlign: TextAlign.center,
),
),
);
}
}
As you can see, the AB and EF are at the bottom of CD though I had set TextAlign.center.
Is there any way let AB CD EF align vertical center?

Result
Code
Text.rich(
TextSpan(
children: <InlineSpan>[
TextSpan(
text: 'AB',
style: bottomTextStyle,
),
WidgetSpan(
alignment: PlaceholderAlignment.middle,
child: Text(
'CD',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.w500,
color: Colors.blue,
),
),
),
TextSpan(
text: 'EF',
style: bottomTextStyle,
),
],
),
),

try this:
child: Text.rich(
TextSpan(
children: [
TextSpan(
text: 'AB\n',
style: bottomTextStyle,
),
TextSpan(
text: 'CD\n',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.w500,
color: Colors.blue,
),
),
TextSpan(
text: 'EF',
style: bottomTextStyle,
),
],
),
textAlign: TextAlign.center,
),

You can use row to center in a line
Container(
width: 300,
height: 57,
decoration: BoxDecoration(
color: Colors.yellow,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("AB", style: bottomTextStyle,),
Text("CD", style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.w500,
color: Colors.blue,
),),
Text("EF", style: bottomTextStyle,),
],
)
),

Extra Spacing Inside My Text Widget In Flutter Application

I have created a mobile application and I was using a font family called Baloo Paaji 2 from google and I have faced an issue of extra spacing created between my 2 text widgets. Below you can see the image of the view.
The text I am talking about is the Welcome! Lakshya Jain. The space between the 2 is way too much. There is no SizedBox or Padding added to the text widget. I tried using 2 different methods to see if the method was the problem. The 2 different methods are shown below.
Method 1
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
],
),
Method 2
Text.rich(
TextSpan(
text: "Welcome !\n",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
children: [
TextSpan(
text: userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
],
),
),
Now I used another method which fixed this issue but created another one.
The Method 3 Screenshot is as follows.
Now the spacing issue is fixed but it created as the text has moved down a little. I want it to be center without the huge gap.
The code for this method is as followed.
Stack(
alignment: Alignment.topLeft,
clipBehavior: Clip.none,
children: [
Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
Positioned(
top: 20.0,
child: Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
),
],
),
The full code for the whole header is as followed
class HomeHeader extends StatelessWidget {
#override
Widget build(BuildContext context) {
// Get User UID
final user = Provider.of<MyAppUser>(context);
return Stack(
clipBehavior: Clip.none,
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: 15.0),
width: MediaQuery.of(context).size.width,
height: 230.0,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(255, 18, 54, 1.0),
Color.fromRGBO(255, 164, 29, 1.0),
],
),
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(59.0),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
StreamBuilder(
stream: DatabaseService(uid: user.uid).userData,
builder: (context, snapshot) {
UserDataCustomer userData = snapshot.data;
return Row(
children: [
ClipOval(
child: CachedNetworkImage(
height: 70,
width: 70,
imageUrl: userData.profilePicture,
),
),
SizedBox(
width: 10.0,
),
Stack(
alignment: Alignment.topLeft,
clipBehavior: Clip.none,
children: [
Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
Positioned(
top: 20.0,
child: Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
),
],
),
// Column(
// mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// Text(
// "Welcome !",
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 18.0,
// fontWeight: FontWeight.w600,
// ),
// ),
// Text(
// userData.fullName,
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 24.0,
// fontWeight: FontWeight.w900,
// ),
// ),
// ],
// ),
// Text.rich(
// TextSpan(
// text: "Welcome !\n",
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 18.0,
// fontWeight: FontWeight.w600,
// ),
// children: [
// TextSpan(
// text: userData.fullName,
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 24.0,
// fontWeight: FontWeight.w900,
// ),
// ),
// ],
// ),
// ),
],
);
},
),
StreamBuilder(
stream: FirebaseFirestore.instance
.collection("Users Database")
.doc(user.uid)
.collection("Cart")
.snapshots(),
builder: (context, snapshot) {
int totalItems = 0;
if (snapshot.connectionState == ConnectionState.active) {
List documents = snapshot.data.docs;
totalItems = documents.length;
}
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartScreen(),
),
);
},
child: Container(
height: 40.0,
width: 40.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(
10.0,
),
),
child: Center(
child: Text(
"$totalItems" ?? "0",
style: TextStyle(
fontSize: 20.0,
fontFamily: "BalooPaaji",
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
),
),
);
},
),
],
),
),
Positioned(
top: 200.0,
child: SearchBar(
width: MediaQuery.of(context).size.width * 0.83,
hintText: "Location",
),
),
],
);
}
}
Someone please help me and fix this issue as soon as possible.

I guess you are trying to reduce gap / padding between the 2 lines. If that is so, then the easiest way is to wrap them inside container and give it a fixed height. Check below.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 20, // assign height as per your choice
child: Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
),
Container(
height: 26, // assign height as per your choice
child: Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
),
],
),
NOTE: you can also give height inside the Text widget
Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
height: 1.2, // assign height to fontSize ratio as per your choice
),
),

Try to change :
This : fontWeight: FontWeight.w600,
To : fontWeight: FontWeight.w500,

Flutter Flexible not wrapping text within a column

I am trying to make a widget that may have some long text that I would want to wrap a few lines.
I am trying to use the "Flexible" widget to wrap my Text but it is still overflowing and I do not know what is going wrong.
Here is what is happening:
Here is my code for the Columns which will be relevant to the Text:
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
And in case it is relevant, here is the whole widget:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Material(
color: Colors.transparent,
child: Container(
height: 100.0,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: EdgeInsets.all(16.0),
child: Icon(
Icons.cake,
size: 60.0,
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
],
),
),
),
),
);
}

You can use Expanded Here. Expanded, which forces the child to expand to fill the available space. you can expand column here.
Here is code snippet for column:-
Expanded(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
)
Here is what you expect:-
Hope it will work.

You need to put the Container to Expanded inside Row widget
Like this
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(16.0),
child: Icon(
Icons.cake,
size: 60.0,
),
),
Expanded(child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
softWrap: true,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
) ],
),
The problem is if you didn't put the Container into Expanded, the Row widget keeps expand itself to horizontal and it would overflow.

you can try this approach by placing the width of the container to 70% and for an image 30%. There is no need for Flexible widget over here
Container(
width:MediaQuery.of(context).size.width*0.7
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black
)
],
),
),