How to wrap text for android app in flutter - flutter

I am developing android app using flutter and In my application trying to warp the text to next line but it is not working. In my app mail id is not wrapping. It is coming in the straight line. But i want to wrap the text in the next line. So, How to show the wrap text(mail id) in the next line in the flutter.
If anyone knows the answer please help to find the solution.
Widget build(BuildContext context)
{
return Drawer(
child: ListView(
children: [
//drawer header
Container(
height: 165,
color: Colors.amber,
child: DrawerHeader(
decoration: BoxDecoration(color: Color(0xFFF5F1F1)),
child: Row(
children: [
const Icon(
Icons.person,
size: 50,
color: Colors.black,
),
const SizedBox(width: 16,),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Name",
maxLines: 1,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: const TextStyle(fontSize: 16,color: Colors.black,fontWeight: FontWeight.bold,),
),
const SizedBox(height: 10,),
Text(
"mynameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee#gmail.com",
maxLines: 2,
overflow: TextOverflow.ellipsis,
softWrap: true,
style: const TextStyle(
fontSize: 12,
color: Colors.black,
),
),
],
),
],
),
),
),
const SizedBox(height: 12.0,),
//drawer body
GestureDetector(
onTap: ()
{
Navigator.push(context, MaterialPageRoute(builder: (c)=> TripsHistoryScreen()));
},
child: const ListTile(
leading: Icon(Icons.history, color: Colors.black,),
title: Text(
"History",
style: TextStyle(
color: Colors.black
),
),
),
),
GestureDetector(
onTap: ()
{
Navigator.push(context, MaterialPageRoute(builder: (c)=> ProfileScreen()));
},
child: const ListTile(
leading: Icon(Icons.person, color: Colors.black,),
title: Text(
"Visit Profile",
style: TextStyle(
color: Colors.black
),
),
),
)
],
),
);
}

Wrap the Text widget with SizedBox with fixed width.
SizedBox(
width: 200,
child:Text(
"mynameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee#gmail.com",
maxLines: 2,
overflow: TextOverflow.ellipsis,
softWrap: true,
style: const TextStyle(
fontSize: 12,
color: Colors.black,
),
),
),

Related

How can I align my drawer elements center in Flutter?

I build a drawer as in the image using Flutter, but the elements of the drawer are showed in the left side and its not beautiful like this. I would like to show them in the center of the drawer or at least a little more to the right. Below you can find my code as a reference. It would be great if someone here can give a little help.
img
return Scaffold(
endDrawer: Drawer(backgroundColor: const Color(0xFF262533),
elevation: 10,
child: ListView(
children: [
PopupMenuButton(
tooltip: '',
child: Text(
'Escorts',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[]),
Padding(padding: EdgeInsets.all(10.0)),
PopupMenuButton(
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Agenturen & Clubs',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Escortagenturen',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Bordelle',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Laufhauser',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Saunaclubs',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Domina & BDSM-Studios',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Tantra & Massaage-Studios',
style:
TextStyle(color: Colors.white),
),
),
),
]),
PopupMenuButton(
tooltip: '',
child: Text(
'Inserieren',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[]),
Padding(padding: EdgeInsets.all(10.0)),
PopupMenuButton(
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Werben',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Werbenformate',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Preise',
style:
TextStyle(color: Colors.white),
),
),
),
]),
Padding(padding: EdgeInsets.all(10.0)),
PopupMenuButton(
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Blog',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Archiv',
style:
TextStyle(color: Colors.white),
),
),
),
]),
const Padding(
padding: EdgeInsets.all(10.0),
),
PopupMenuButton(
position: PopupMenuPosition.under,
tooltip: '',
child: const Text(
'Kontakt',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[]),
],
),
),
replace ListView with Column widget
and inside Column make
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
code:
endDrawer: Drawer(
backgroundColor: const Color(0xFF262533),
elevation: 10,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//todo
]
))
you can align your element by use Container or Column in my case I build drawer like this
Drawer(
backgroundColor: black,
child: Column(
children: [
SizedBox(
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: black,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: accent,
width: 0.5,
),
),
height: MediaQuery.of(context).size.width / 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/logs.png",
height: 80,
width: 80,
),
const Text(
"Name App",
style: TextStyle(
color: grey,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
const Text(
"some body text",
style: TextStyle(
color: white,
fontSize: 14,
),
),
],
)),
),
const SizedBox(
height: 10,
),
Expanded(
child: ListView(
children: [
const Padding(
padding: EdgeInsets.only(right: 10),
child: Text(
"body text",
style: TextStyle(
color: white,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.only(right: 15),
child: Row(
children: const [
Icon(
Icons.check_circle_outline_outlined,
size: 20,
color: accent,
),
SizedBox(
width: 10,
),
Text(
"some body text",
style: TextStyle(
color: grey,
fontSize: 14,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(right: 15, top: 4),
child: Row(
children: const [
Icon(
Icons.check_circle_outline_outlined,
color: accent,
size: 20,
),
SizedBox(
width: 10,
),
Text(
"some body text",
style: TextStyle(
color: grey,
fontSize: 14,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(right: 15, top: 4),
child: Row(
children: const [
Icon(
Icons.check_circle_outline_outlined,
size: 20,
color: accent,
),
SizedBox(
width: 10,
),
Text(
"some body text",
style: TextStyle(
color: grey,
fontSize: 14,
),
),
],
),
),
const Divider(
endIndent: 10,
indent: 10,
color: grey,
),
ListTile(
dense: true,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const AboutPage()));
},
leading: const Icon(
Icons.info_outlined,
color: accent,
),
title: const Text(
"About App",
style: TextStyle(
color: white,
fontSize: 14,
),
),
trailing: const Icon(
Icons.arrow_back_ios_new,
color: grey,
size: 15,
),
),
ListTile(
dense: true,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const AboutMe()));
},
leading: const Icon(
Icons.engineering,
color: accent,
),
title: const Text(
"About",
style: TextStyle(
color: white,
fontSize: 14,
),
),
trailing: const Icon(
Icons.arrow_back_ios_new,
color: grey,
size: 15,
),
),
],
),
),
Container(
padding: const EdgeInsets.only(left: 8, right: 8),
child: const Text(
"Folow me Now !",
style: TextStyle(fontSize: 12, color: grey),
textAlign: TextAlign.center,
)),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: black,
),
margin: const EdgeInsets.all(10),
child: Row(
children: [
const Spacer(),
IconButton(
onPressed: () {
},
icon: const Icon(
FontAwesomeIcons.facebook,
color: accent,
),
),
IconButton(
onPressed: () {
},
icon: const Icon(
FontAwesomeIcons.instagram,
color: accent,
),
),
IconButton(
onPressed: () {},
icon: const Icon(
FontAwesomeIcons.whatsapp,
color: accent,
),
),
IconButton(
onPressed: () {},
icon: const Icon(
FontAwesomeIcons.telegram,
color: accent,
),
),
const Spacer(),
],
),
),
],
),
),

Add buttons below the body

The code below (I shortened the code for simplicity) displays the characteristics of the device. I placed all the characteristics in the body and displayed them in a certain way. Tell me how I can make two buttons (marked in red in the photo) under the body. Or put them in the body? tell me the best way to do it.
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
),
body: Align(
alignment: Alignment.topCenter,
child: Container(
constraints: const BoxConstraints(maxWidth: 800, maxHeight: 400),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),),
child: SingleChildScrollView(
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 ))),
],
),
),
)
),
));
You can use bottomNavigationBar on Scaffold
Scaffold(
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(8.0), //the one you prefer
child: Row(
children: [
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
SizedBox(
//space between button
width: 16,
),
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
],
),
),
Also, you can wrap Container with Column widget
body: Column(
children: [
Container(...)//your widget
Padding(
padding: const EdgeInsets.all(8.0), //the one you prefer
child: Row(
children: [
Expanded(child: OutlinedButton(...)),
SizedBox(width:x),
Expanded(child: OutlinedButton(...)),
Full snippet on second approach
return Scaffold(
body: Column(
children: [
Container(
constraints: const BoxConstraints(maxWidth: 800, maxHeight: 400),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),
),
child: SingleChildScrollView(
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))),
],
),
),
)),
// Spacer(), /// you you want at the bottom
Padding(
padding: const EdgeInsets.all(8.0), //the one you prefer
child: Row(
children: [
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
SizedBox(
//space between button
width: 16,
),
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
],
),
)
],
),
);
You can check more about widgets, Column and layout.

Row with Expanded

I have 3 widgets in the row
GestureDetector(
onTap: () {},
child: Card(
margin: EdgeInsets.zero,
child: Padding(
padding: EdgeInsets.all(15),
child: Row(
children: <Widget>[
Text(
"Description",
style: TextStyle(fontSize: 15, color: Colors.orange),
),
Spacer(),
Expanded(
child: Text(
descriptionText,
style: TextStyle(fontSize: 15, color: const Color(0xff0000ff)),
),
),
Text(">", style: TextStyle(fontSize: 15, color: Colors.black))
],
),
),
),
)
The UI looked like this
How can I move the All beside > ? If the text is too long, I would like the Text displayed multi line, that why I use Expanded.
You can remove the Expanded, however if there's a need for that, you can use the textAlign property:
Expanded(
child: Text(
'All',
textAlign: TextAlign.right,
),
)
Full solution:
GestureDetector(
onTap: () {},
child: Card(
margin: EdgeInsets.zero,
child: Padding(
padding: EdgeInsets.all(15),
child: Row(
children: <Widget>[
Text(
"Description",
style: TextStyle(fontSize: 15, color: Colors.orange),
),
Spacer(),
Expanded(
child: Text(
descriptionText,
textAlign: TextAlign.right, // <-- You need this
style: TextStyle(fontSize: 15, color: const Color(0xff0000ff)),
),
),
Text(">", style: TextStyle(fontSize: 15, color: Colors.black))
],
),
),
),
)

flutter buttomNavigationBar not displaying or working correctly

I have the following code:
#override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
this.setTable();
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Row(children: <Widget>[
Image.asset(
'images/logobig.png',
width: 40.0,
height: 40.0,
),
Text(widget.title),
]),
backgroundColor: Colors.blue,
),
body: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Currency Exchange Rates",
textScaleFactor: 1,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
DataTable(
// textDirection: TextDirection.rtl,
// defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
// border:TableBorder.all(width: 2.0,color: Colors.red),
showCheckboxColumn: false,
columns: const <DataColumn>[
DataColumn(
label: Text(
'Symbol',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(
'Buy',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(
'Sell',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
],
rows: rows,
),
]),
),
),
bottomNavigationBar: Material(
color: Colors.white,
child: Row(children: <Widget>[
FlatButton(
onPressed: () => {},
color: Colors.white,
padding: EdgeInsets.all(10.0),
child: Column(
// Replace with a Row for horizontal icon + text
children: <Widget>[
ImageIcon(
AssetImage('images/dollar_world_grid_selected.png'),
size: 40.0,
),
Text(
"Currency",
style:
TextStyle(color: Color.fromRGBO(43, 73, 193, 0.4)),
)
],
)),
FlatButton(
onPressed: () => {
Navigator.pushReplacement(
context,
new MaterialPageRoute(
builder: (context) => goldRate()))
},
color: Colors.white,
padding: EdgeInsets.all(10.0),
child: Column(
// Replace with a Row for horizontal icon + text
children: <Widget>[
ImageIcon(
AssetImage('images/gold-bars.png'),
size: 40.0,
),
Text(
"Gold",
style: TextStyle(
color: Color.fromRGBO(127, 127, 127, 0.4)),
)
],
)),
])));
}
The buttomNavigationBar should navigate between different screents when the user clicks on one of the buttons.
Unfortunately I get the following output:
As you can see it is displayed up. other components not displayed and the icon images are not appearing. Any Idea on how to fix or otherway to do it? Thanks
Replace the bottomNavigationBar with persistentFooterButtons:
persistentFooterButtons: <Widget>[
new Container(
height: 100,
child: Row(
children: <Widget>[
FlatButton(
onPressed: () => {},
color: Colors.white,
padding: EdgeInsets.all(10.0),
child: Column(
// Replace with a Row for horizontal icon + text
children: <Widget>[
ImageIcon(
AssetImage('images/dollar_world_grid_selected.png'),
size: 40.0,
),
Text(
"Currency",
style:
TextStyle(color: Color.fromRGBO(43, 73, 193, 0.4)),
)
],
)),
FlatButton(
onPressed: () => {},
color: Colors.white,
padding: EdgeInsets.all(10.0),
child: Column(
// Replace with a Row for horizontal icon + text
children: <Widget>[
ImageIcon(
AssetImage('images/gold-bars.png'),
size: 40.0,
),
Text(
"Gold",
style:
TextStyle(color: Color.fromRGBO(127, 127, 127, 0.4)),
)
],
),
),
],
),
),
],
In case you want to use BottomNavigationBar, take a look at the example in the documentation.

Vertically align text in Card widget in Flutter

For some reason the text in the Cards are displaying slightly lower than the vertical center of each Card. It becomes more noticeable as more cards are added.
I have tried wrapping the Text widget in a Center widget. I have tried placing mainAxisAlignment and crossAxisAlignment in what I felt was appropriate placing, but still no difference.
Worth noting: I am using AutoSizeText widget where normal Text widget would be. But even with the normal Text widget, I encounter the same issue.
return new Container(
padding: new EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Expanded(
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(
'Happy with this text',
style: new TextStyle(fontSize: 20.0),
),
new Text(
'Happy with this text',
style: new TextStyle(fontSize: 20.0),
),
],
),
),
Expanded(
flex: 8,
child: Row(
// mainAxisAlignment: MainAxisAlignment.center, // does not make any noticeable difference
// crossAxisAlignment: CrossAxisAlignment.center, // does not make any noticeable difference
children: <Widget>[
Expanded(
child: Card(
color: Colors.white70,
child: Container(
child: ListTile(
title: Center(
child: AutoSizeText(
'Not happy with this text',
style: TextStyle(
fontWeight: FontWeight.w500, fontSize: 30),
minFontSize: 12.0,
),
),
leading: Icon(
Icons.question_answer,
color: Colors.blue[500],
),
),
),
)),
Expanded(
child: Column(
children: <Widget>[
Expanded(
child: InkWell(
onTap: () {
print("Card 1 Clicked");
},
child: Card(
color: Colors.white70,
child: Container(
child: ListTile(
title: Center(
child: AutoSizeText(
'Not happy with this text',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 12),
minFontSize: 12.0,
),
)),
),
))),
Expanded(
child: InkWell(
onTap: () {
print("Card 2 Clicked");
},
child: Card(
color: Colors.white70,
child: Container(
child: ListTile(
title: Center(
child: AutoSizeText(
'Not happy with this text',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: fontSize),
minFontSize: 12.0,
),
)),
),
))),
Expanded(
child: InkWell(
onTap: () {
print("Card 3 Clicked");
},
child: Card(
color: Colors.white70,
child: Container(
child: ListTile(
title: Center(
child: AutoSizeText(
'A nocturnal ',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: fontSize),
minFontSize: 12.0,
),
)),
),
))),
Expanded(
child: InkWell(
onTap: () {
print("Card 4 Clicked");
},
child: Card(
color: Colors.white70,
child: Container(
child: ListTile(
title: Center(
child: AutoSizeText(
'A nocturnal ',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: fontSize),
minFontSize: 12.0,
),
)),
),
))),
],
),
),
],
),
),
],
),
);
Container(
child: Card(
margin: EdgeInsets.all(20.0),
elevation: 10.0,
//color: Colors.blue,
child:Align(
child: ListTile(
title: Text(
"CIL",
style: TextStyle(fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
alignment: Alignment.center,
),
),
),
Removing ListTile fixed the issue, though I assume a better way would be to override whatever defaults ListTile has which causes this.