How to remove the space top and bottom from ListTile?
My Code is:
child: Column(
children: <Widget>[
ListTile(
contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
title: Text(
'Home',
style: TextStyle(fontSize: 15.0),
),
),
ListTile(
contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
title: Text(
'Audio',
style:
TextStyle(fontSize: 15.0, color: Colors.black45),
),
),),
Screenshot:
UPDATE
Now you can also use the following propertier:
horizontalTitleGap - Between title and leading
minVerticalPadding - Between title and subtitle
minLeadingWidth - Minimum width of leading
contentPadding - Internal padding
OLD
You can use the visualDensity property to reduce the space.
ListTile(
visualDensity: VisualDensity(horizontal: 0, vertical: -4),
title: Text("xyz")
);
The visualDensity value can be changed from -4.0 to 4.0. Lower the value, more compact the view.
P.S. This solution is similar to a different question
This question is about the top/bottom spacing. But the other question is about gap between leading and title
In your code put property dense: true inside the list tile
ListTile(
dense:true,
contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
title: Text(
'Home',
style: TextStyle(fontSize: 15.0),
),
),
Hope it helps!
ListTile(
dense: true,
contentPadding: EdgeInsets.symmetric(horizontal: 0.0, vertical: 0.0),
visualDensity: VisualDensity(horizontal: 0, vertical: -4),
);
Above solution worked for me. I hope, this will also help you. Thanks for asking this question.
That worked for me in ListTile:
visualDensity: VisualDensity(horizontal: 0, vertical: -4)
With ListTile it is not possible. Some modifications are possible with the help of ListTileTheme like color and there is also the option of modifying padding but only work for left and right padding. So better is to create your own custom tile as #santosh showed in his answer.
You can also use SizedBox but it can result in tragic output.
Try this
child: Column(
children: <Widget>[
Text(
'Home',
style: TextStyle(fontSize: 15.0),
),
Text(
'Audio',
style:
TextStyle(fontSize: 15.0, color: Colors.black45),
),
),)
this is worked for me
ListTile(
dense:true,
minVerticalPadding: 0,
contentPadding: EdgeInsets.zero,
visualDensity: VisualDensity(horizontal: 0, vertical: 4),
);
now I have no padding at all
Let's try with shorter way:
ListTile(
contentPadding: EdgeInsets.zero,
dense: true,
title: Text('label'),
);
For me Padding widget worked in place of ListTile.padding variable can be updated as per your requirements for a ListItem.
Padding(
padding: const EdgeInsets.only(left : 8.0 , right 8.0),
child: Text("List Item Text",
style: Theme.of(context).textTheme.body1))
None of the solutions above will work (for now). Your best bet is to use a TextButton and include a Row as the child
Related
I have a Container widget in which all my codes are in for the particular page. It has a background image and inside the container, there is a Center widget. I want to set the background color of the center widget to white but while doing so, the entire screen's background is changing to white. How can I achieve that please?
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/images/loginbg2.jpg'),
fit: BoxFit.cover
),
),
child: Scaffold(
backgroundColor: Colors.transparent, //code for background image
body: Center(
child:Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Padding(
padding: EdgeInsets.fromLTRB(40, 0, 0, 0),
child: Text(
"Welcome back!",
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
)
),
SizedBox(
height: 20.0,
), //code for center widget
This is probably because the Column widget inside your Center widget is taking up the entire screen.
A Column widget (unless constrained) is taking up all the space it can get.
Try solving your issue by removing the Column widget for now and only use the container inside the Center widget and define it's height and width. See if the background you want is coming back in view.
I am new to flutter learning a flutter UI build from youtube. While I am using the expanded widget, I found the output is not what I want, just wanna ask is there any way to limit the height of the expanded widget.
This is my current UI looks like.
SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: Container(
alignment: Alignment.center,
height: 52,
width: 52,
decoration: BoxDecoration(
color: Color(0xFFF2BEA1),
shape: BoxShape.circle,
),
child: SvgPicture.asset("icons/icons/menu.svg"),
),
),
Text(
"\t\tMake Cents out of \n\t\tSolar",
style: Theme.of(context).textTheme.subtitle1!.copyWith(
fontWeight: FontWeight.w900,
fontSize: 38,
color: Colors.blueGrey[900]),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(29.5),
),
child: TextField(
decoration: InputDecoration(
hintText: "Search",
icon: SvgPicture.asset("icons/icons/search.svg"),
border: InputBorder.none,
),
),
),
),
Expanded(
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: .85,
children: <Widget>[
CategoryCard(
title: "Promotion of the day",
svgSrc: "icons/icons/Hamburger.svg",
press: () {},
),
CategoryCard(
title: "Promotion of the day",
svgSrc: "icons/icons/Hamburger.svg",
press: () {},
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(20.0, 0, 0, 0),
child: Text(
"Solar Panel",
style: Theme.of(context).textTheme.subtitle1!.copyWith(
fontWeight: FontWeight.w900,
fontSize: 20,
color: Colors.black),
),
),
],
I wanna know is there any way to control the height of the expanded widget so that my container with text can connect right below the custom Category Card. Or should I use another widget instead of using the expanded widget?
By definition, the Expanded widget will fill up all the remaining screen space. If you instead want to use a set size, you can use a Container or SizedBox with their width and height parameters.
To get a better understanding of constraints in general, I suggest you check out this flutter documentation page all about constraints.
To set a minimum and maximum size (width and height) for a widget you can use ConstrainedBox widget, learn more about it here
You can't control the height of the Expanded widget. It takes all the space that is available on the screen. I suggest you to use SizedBox and explicitly provide the required height and set width as double.infinity.
I had same issue. I suggest ConstrainedBox widget to set minimum and maximum heights.
I am currently trying to add a switch to the setting page of my android application. However, when I add the code and try to view it on the emulator it throws the following error:
Another exception was thrown: A RenderFlex overflowed by 99640 pixels on the right.
Code:
Container(
decoration: BoxDecoration (
color: Colors.white,
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey)
),
),
constraints: BoxConstraints (
maxHeight: ((width * ratio) * 0.1),
minWidth: width,
maxWidth: width,
),
child: Row(
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.only(left: (width*ratio) * 0.025),
child: Text('Highlight Identical Numbers', style: TextStyle(color: Colors.black87, fontSize: fontTextTwoScale, fontFamily: 'Roboto'))
)
),
Container(
child: Switch(value: null, onChanged: null,)
),
],
),
),
I am trying to set it up so that there is text that is aligned to the left of the screen and the switch is aligned to the right. I don't understand how a widget can be 99640 pixels overflowed. I dont see a size options for the Switch.
This should easily do the job. Customize the ListTile or wrap it inside a Container for your own customization.
ListTile(
title: Text("Setting Text One Title"),
trailing: Switch(value: true, onChanged: (bool x) {}),
)
All I need is my text to be multi-line. Am giving the property of maxLines but its still getting RenderFlex overflowed error to the right as the next is not going to 2nd line,
Align( alignment: Alignment.bottomCenter,
child: new ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(20.0),
child: new Text(
"This is a very bigggggggg text !!!",textDirection: TextDirection.ltr,
style: new TextStyle(fontSize: 20.0, color: Colors.white),
maxLines: 2,
),
)
],
),
)
Short answer
All that is required for multi-line text, is that your Text() widgets' width is limited by a parent widget. For example:
SizedBox(
width: 150,
child: Text(
"This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
),
),
Long answer
Minimal working example + explanation:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold( //Text widgets, multi-line or not, need a Scaffold widget somewhere up the widget tree.
body: Row( //Widgets which help to display a list of children widgets are the 'culprit', they make your text widget not know what the maximum width is. In OP's example it is the ButtonBar widget.
children: [
Container(
width: 100, //This helps the text widget know what the maximum width is again! You may also opt to use an Expanded widget instead of a Container widget, if you want to use all remaining space.
child: Center( //I added this widget to show that the width limiting widget doesn't need to be a direct parent.
child: Text(
"This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
),
),
),
],
),
),
);
}
}
Extra
You also mentioned maxlines. This property limits the
maximum amount of lines. If this is what you want, I recommend you also play with the overflow property.
SizedBox(
width: 100,
child: Text(
"This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
UPDATE
I came across this video on the official Flutter channel which explains this issue quite well. They recommend using a LimitedBox widget.
Just wrap your text widget with Expanded as below
Expanded(
child: Text('data', maxLines: 4,
overflow: TextOverflow.ellipsis,
textDirection: TextDirection.rtl,
textAlign: TextAlign.justify,),
),
try this:
Expanded(
child: Text(
'a long text',
overflow: TextOverflow.clip,
),
),
in my implementation I put this inside a row and surrounded it with sized boxes on each side so that I have some space between my elements, why using expanded you may ask, well it's used to take as much space as possible so the text would look good in portrait or landscape mode.
and here is a full example on how to make it even react vertically not just horizontally:
Card(
child: InkWell(
onTap: (){},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
SizedBox(
height: 70, // default\minimum height
),
Container(
height: 44,
width: 44,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(22))),
),
SizedBox(
width: 15,
),
Expanded(
child: Text(
'the very long title',
overflow: TextOverflow.clip,
),
),
SizedBox(
width: 10,
),
Text(
'value', //some other text in the end of the card or maybe an icon instead
),
SizedBox(
width: 30,
),
],
),
),
),
)
I think you forgot to add overflow type.
You can use something like this:
Text(
"TOP ADDED",
textAlign: TextAlign.justify,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 18.0),
maxLines: 2,)
Use Expanded widget with column to achieve multiline text.
Expanded(child:
Column(crossAxisAlignment: CrossAxisAlignment.start ,
children: [
Text(food.title),
Text(food.price)
]
))
Just wrap the text widget in Flexible. As it only use space that it need.
After maxLines, it just cut to ellipsis.
If you want unlimited lines, just remove maxLines attribute. With the help of Flexible, it uses space which widget needs.
Flexible(
child: Text('Long Text', maxLines: 3,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.justify,
),
),
Best way to handle this:
Expanded(
child: Text(document['content'],
textAlign: TextAlign.start,
overflow: TextOverflow.ellipsis,
maxLines: 20,
))
You can use this trick.
Text( ''' This is very big text''' ),
Just wrap a text around three single quotes and flutter will format a text as per its length . No need to use max lines and text field.
Maybe try using TextField:
new TextField(
keyboardType: TextInputType.multiline,
maxLines: 2,
)
wrap your Text widget with AutoSizeText widget and also Flexible widget.
AutoSizeText adjust your text size as per the screen size
Flexible control your widget not to overflow outside
for get AutoSizeText you have to add dependency.
auto_size_text: ^3.0.0 - Example
Maxline is used for set how many lines you want to set or see.
Text(
"Name Safal Bhatia",
style: TextStyle(fontSize: 16),
maxLines: 3,)
I want to set rounded corner of Textspan in flutter, I think class Paint is needed, but I cannot figure out how to do that.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: new AppBar(),
body: new RichText(
text: new TextSpan(
text: null,
style: TextStyle(fontSize: 20.0, color: Colors.black),
children: <TextSpan>[
new TextSpan(
text: 'inactive ',),
new TextSpan(
text: 'active',
style: new TextStyle(
color: Colors.white,
background: Paint()
..color = Colors.redAccent,
)),
],
),
),
),
);
}
}
Is there a way to use Textspan to achieve that instead of using a Container wrapping Text?
Without using Container or something else - I can see only one way to make corners rounded
TextSpan(
text: 'active',
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
background: Paint()
..strokeWidth = 24.0
..color = Colors.red
..style = PaintingStyle.stroke
..strokeJoin = StrokeJoin.round))
But in this case there are paddings around text, so I doubt this is proper way
You can use RichText with WidgetSpan, then combine it with line height
RichText(
text: TextSpan(
children: [
WidgetSpan(
child: Container(
child: Text(
addressItem.deliveryAddressType == "home" ? "Nhà" : "Văn phòng",
style: TextStyle(
fontFamily: AppFonts.SFUITextMedium,
color: AppColors.wram_grey,
fontSize: AppFonts.textSizeSmall,
),
),
decoration: BoxDecoration(
color: AppColors.header_grey, borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.fromLTRB(6, 2, 6, 2),
margin: EdgeInsets.only(right: 5),
),
),
TextSpan(
text: '${addressItem.street}, ${addressItem.ward}, ${addressItem.city}, ${addressItem.region}',
style: TextStyle(
fontFamily: AppFonts.SFUITextMedium,
color: AppColors.wram_grey,
fontSize: AppFonts.textSizeMedium,
height: 1.5),
),
],
),
),
if the highlighted text is short enough (so you do not want to break line in it), you can just use WidgetSpan insted of TextSpan.
For example:
RichText(
textAlign: TextAlign.center,
text: TextSpan(
children: [
TextSpan(
text: "some text",
),
WidgetSpan(
child: Container(
padding: EdgeInsets.symmetric(vertical: 1),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(999),
),
child: IntrinsicWidth(
child: Text(
"some text",
),
),
)
),
TextSpan(text: "some text"),
],
),
),
I have created a package which is able to customize the background of the text --> you can change the radius, padding and color for the text background.
It's a fork from the AutoSizeText widget so you could even autosize the text if you want to.
Here is an example image of the text with background, radius and padding.
Hope this can help anyone who needs it.
The link to the github repo is following: https://github.com/Letalus/auto_size_text_background
If you want to set the rounded corner of the text field in Flutter You have to use Container only, If you want to avoid Container then there is another way, you have to avoid using ListView as a body in your app. If you want to add an only single item on screen then you can try without container but if there is more than one item then you have no choice without implementing ListView and add multiple containers for a different purpose.
new Container(
height: 80.0,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
color: Colors.green,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(30.0),
topRight: const Radius.circular(30.0),
bottomLeft: const Radius.circular(30.0),
bottomRight: const Radius.circular(30.0))),
child: new Center(
child: new Text("Active text"),
)),
),