How to break this text so it doesn't overflow? - Flutter - flutter

I have a widget that builds a list from an array. Each item in the array builds a widget with some columns and rows. I want the text to break so It doesnt overflow.
I've tried adding overflow: TextOverflow.ellipsis to the Text or wrapping the Row that wraps the icon and the text that overflow with a Expanded widget, but both didn't work.
Actually it looks like this:
This is my code:
child: Column(
verticalDirection: VerticalDirection.down,
textBaseline: TextBaseline.alphabetic,
textDirection: TextDirection.ltr,
children: < Widget > [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: < Widget > [
Row(
children: [
const Icon(Icons.medication),
//
// This is the text that overflows
//
Text(
entries[index].pillname,
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
],
),
Text(
entries[index].pillTimeStr,
style: const TextStyle(
fontSize: 28,
color: Color.fromARGB(255, 79, 79, 79),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: < Widget > [
Container(
margin: const EdgeInsets.all(4),
child: FloatingActionButton(
onPressed: () {
setState(() {
entries[index].pilldone = !entries[index].pillDone;
});
},
tooltip:
entries[index].pillDone ? 'Tomada' : 'No tomada',
backgroundColor: entries[index].pillDone ?
Colors.green :
Theme.of(context).primaryColor,
child: const Icon(Icons.check),
),
),
Container(
margin: const EdgeInsets.all(4),
child: FloatingActionButton(
onPressed: () {
showAdaptiveActionSheet(
context: context,
cancelAction: CancelAction(
title: const Text('Cancelar'),
),
actions: < BottomSheetAction > [
BottomSheetAction(
title: const Text('Modificar'),
onPressed: () {}),
BottomSheetAction(
title: const Text('Eliminar'),
onPressed: () {
Navigator.pop(context);
_askRemovePill(entries[index].iD);
}),
]);
},
tooltip: 'Eliminar',
backgroundColor: Colors.blue,
child: const Icon(Icons.mode_edit),
)),
],
),
],
),

In your case, all you need to do is wrap your Text inside the Row with an Expanded widget
Expanded(
child: Text(/*......your text widget........*/),
),
The Expanded widget gives your Text widget horizontal constraints
IF you don't wish to see the text go on to the next line,
use the overflow property on the text
overflow : TextOverflow.ellipsis, //inside Text

Use the Wrap widget instead of the Row widget. It will break the text to the next line should there be an overflow.
Like this,
Wrap(
children: [
const Icon(Icons.medication),
//
// This is the text that overflows
//
Text(
entries[index].pillname,
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
],
),
Text(
entries[index].pillTimeStr,
style: const TextStyle(
fontSize: 28,
color: Color.fromARGB(255, 79, 79, 79),
),
),
],
),

Related

flutter Text Button padding issue

I have two types of TextButton widget to be used in ListView().
They are identical(copy&paste) except for onPressed attribute.
One takes a widget and show it with Navigator.push.
One takes a VoidCallback and run it.
Other styling part are exactly the same.
Widget ListTextLinkButton({required BuildContext context, required String text, required Widget page}) {
return Container(
height: _listItemHeight,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(0),
),
child: Text(text,
style: TextStyle(
fontSize: _buttonTextSize,
color: Colors.black,
fontWeight: FontWeight.normal,
),
textAlign: TextAlign.start,
),
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => page));
}
)
],
),
);
}
Widget ListTextActionButton({required BuildContext context, required String text, required onPressed}) {
return Container(
height: _listItemHeight,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(0),
),
child: Text(text,
style: TextStyle(
fontSize: _buttonTextSize,
color: Colors.black,
fontWeight: FontWeight.normal,
),
textAlign: TextAlign.start,
),
onPressed: onPressed
)
],
),
);
}
But when I put them inside ListView like this,
return Scaffold(
appBar: ...
body: ListView(
padding: EdgeInsets.all(16.sp),
children: <Widget>[
ListTitle(context: context, text: '기타'),
ListTextLinkButton(context: context, text: '서비스 이용 약관', page: UserAgreementPage('terms-of-service')),
ListTextLinkButton(context: context, text: '개인정보 수집 및 활용 동의서', page: UserAgreementPage('privacy-policy')),
ListTextActionButton(context: context, text: '로그아웃', onPressed: () {
Navigator.pop(context);
signOut();
}),
ListTextActionButton(context: context, text: '탈퇴하기', onPressed: (){}),
])),
This is what I get.
Where does the extra padding come from? Can anyone explain how the TextButton padding works??
Please wrap it with SizedBox( child : TextButton(), height: 10.00 , width : 10.00) as in flutter widgets have thier predefined padding.So, this will work for you.
I try your code and found that character text in your ListTextActionButton make empty space in front of text.

how to remove a value from a list using remove() and setState() in Stateful widget in flutter using onpressed property of a button?

I'm trying to delete a quote from the list on clicking the button. but on click the list doesn't seem to be updated or the quote isn't being deleted on click.
any solutions would be appreciated !!!
this is a list of quotes which i'm displaying in a card in the activity
List<Quote> quotes =[
Quote(quote: "be yourself; everyone else is already taken",author: "oscar wilde"),
Quote(quote: "this is test quote 2",author: "mikey"),
Quote(quote: "good thing about music, when it hits you, you feel no pain",author: "bob marley"),
];
using a textbutton to delete a particular quote on click
class QuoteCard extends StatelessWidget {
final Quote quote;
final Function delete;
QuoteCard({required this.quote, required this.delete});
#override
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.fromLTRB(16, 16, 16, 0),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
quote.quote,
style: TextStyle(
fontSize: 18,
color: Colors.grey[600],
),
),
SizedBox(height: 10,),
Text(
quote.author,
style: TextStyle(
fontSize: 14,
color: Colors.grey[800],
),
),
SizedBox(height: 8.0,),
TextButton(
onPressed: (){ delete; },
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.delete),
Text(
'delete quote',
),
],
)
)
],
),
),
);
}
}
trying to delete the quote using the remove() method in setState()
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
appBar: AppBar(
title: Text('Awesome Quotes'),
centerTitle: true,
backgroundColor: Colors.redAccent,
),
body: Column(
children: quotes.map((quote) => QuoteCard(
quote:quote,
delete:(){
setState(() {
quotes.remove(quote);
});
}
)).toList(),
),
);
}
}
Card(
margin: EdgeInsets.fromLTRB(16, 16, 16, 0),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
quote.quote,
style: TextStyle(
fontSize: 18,
color: Colors.grey[600],
),
),
SizedBox(height: 10,),
Text(
quote.author,
style: TextStyle(
fontSize: 14,
color: Colors.grey[800],
),
),
SizedBox(height: 8.0,),
TextButton(
onPressed:(){
delete();
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.delete),
Text(
'delete quote',
),
],
)
)
],
),
),
);
Try this one, it works
onPressed:(){
delete();
},

How to change the Flutter TextButton height?

This is the output:
I try to make an app but when I use the TextButton, I get the space between two Buttons
I need one by one without space
If I use the Expanded Widget, ScrollChildView doesn't work
I try but I can't clear this stuff.
I try to make this type of TextButton.
Anyone know or have any idea about this?
import "package:flutter/material.dart";
import 'package:audioplayers/audio_cache.dart';
class Account extends StatefulWidget {
Account({Key key}) : super(key: key);
#override
_AccountState createState() => _AccountState();
}
class _AccountState extends State<Account> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
children: [
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextButton(
child: Container(
child: Text(
'One',
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.red),
),
onPressed: () {
final player = AudioCache();
player.play('note1.wav');
},
),
SizedBox(
height: 1,
),
TextButton(
child: Container(
child: Text(
'Two',
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.green),
),
onPressed: () {
final player = AudioCache();
player.play('note2.wav');
},
),
TextButton(
child: Container(
child: Text(
'Three',
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.blue),
),
onPressed: () {
final player = AudioCache();
player.play('note3.wav');
},
),
TextButton(
child: Container(
child: Text(
'Four',
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.grey),
),
onPressed: () {
final player = AudioCache();
player.play('note4.wav');
},
),
TextButton(
child: Container(
child: Text(
'Five',
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.purple),
),
onPressed: () {
final player = AudioCache();
player.play('note5.wav');
},
),
],
),
),
],
),
),
),
);
}
}
You just wrap your text button with the SizedBox and set height and width as follows:
SizedBox(
height: 30,
width: 150,
child: TextButton(...),
)
Full available height:
SizedBox(
height: double.infinity, // <-- match_parent
child: TextButton(...)
)
Specific height:
SizedBox(
height: 100, // <-- Your height
child: TextButton(...)
)
In Flutter 2.0, you can set the height of the TextButton directly without depending on other widgets by changing the ButtonStyle.fixedSize:
TextButton(
child: Text('Text Button'),
style: TextButton.styleFrom(fixedSize: Size.fromHeight(150)),
),
If you want to modify all TextButtons, put it in the ThemeData like below:
return MaterialApp(
theme: ThemeData(
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(fixedSize: Size.fromHeight(150)),
),
),
Live Demo
use the following to even add your preferred size as well
N/B: child sized box is the main child widget inside Padding widget
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(30.0),
child: SizedBox(
height: 60,
width: 200,
child: ElevatedButton.icon(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => RegistrationMenu()));
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.red.shade800),
),
icon: Icon(Icons.person_add_alt_1_rounded, size: 18),
label: Text("Register Users"),
),
),
),
],
),
Wrap the TextButton in an "Expanded" Widget.
Expanded(
child: TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.red,
padding: EdgeInsets.zero,
),
child: const Text(''),
onPressed: () {
playSound(1);
},
),
),
Another solution would be wrapping with ConstrainedBox and using minWidth & minHeight
properties.
ConstrainedBox(
constraints:BoxConstraints(
minHeight:80,
minWidth:200
),
child:TextButton(..)
)
You need to do two things
Determine text button height using
Sizedbox
Remove padding around text button using
TextStyle.StyleFrom()
SizedBox(
height: 24.0,
child: TextButton(
onPressed: () {},
child: Text('See more'),
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
),
),
),
TextButton(
 onPressed: _submitOrder,
 child: Padding(
     padding: EdgeInsets.only(left: 20, right: 20),
     child: Text("Raise")),
 style: ButtonStyle(
   shape: MaterialStateProperty.all(
   const RoundedRectangleBorder(
   borderRadius: BorderRadius.all(Radius.circular(50)),
   side: BorderSide(color: Colors.green)))),
)
TextButton(
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap
),
child: Text(''),
);

Rounded AppBar in Flutter with Back button

I created a custom rounded AppBar using a code found here, but with just a title in the center.
I wanted to add a backbutton in the top left corner inside AppBar and I tried nesting a button and the text in a Row, but the result is that neither the button or the text are shown. Any help?
Here the code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
// ignore: must_be_immutable
class RoundedAppBar extends StatelessWidget implements PreferredSizeWidget {
String title;
RoundedAppBar(this.title);
#override
Widget build(BuildContext context) {
return PreferredSize(
child: LayoutBuilder(builder: (context, constraints) {
final width =
constraints.maxWidth * 16; //per modificare "rotondità" app Bar
return OverflowBox(
maxHeight: double.infinity,
maxWidth: double.infinity,
child: SizedBox(
height: width,
width: width,
child: Padding(
padding: EdgeInsets.only(
bottom: width / 2 - preferredSize.height / 2),
child: Container(
alignment: Alignment.bottomCenter,
padding: EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: const Color(0xff000350),
shape: BoxShape.circle,
),
child: Row(
children: [
Align(
alignment: Alignment.centerLeft,
child: IconButton(
color: Colors.black,
icon: Icon(Icons.chevron_left),
onPressed: () => Navigator.pop(context),
),
),
Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Conformity',
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.normal),
),
],
)),
),
),
);
}),
preferredSize: preferredSize);
}
#override
Size get preferredSize => Size.fromHeight(80);
EDIT:
Tried using ListTile as suggested, something happened but didn't work properly.
Here the result.
child: ListTile(
title: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Conformity',
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.normal),
),
leading: IconButton(
color: Colors.white,
icon: Icon(Icons.chevron_left),
onPressed: () => Navigator.pop(context),
),
),
EDIT:
I inserted your code as shown. With trial and error, using 35 as height I was able to see the title, but still no button.
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_buildBack(true, context),
Container(
height: 35,
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Conformity',
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.normal),
),
),
_buildBack(false, context),
],
and
Widget _buildBack(bool isPlaceHolder, BuildContext context) {
return Visibility(
child: InkWell(
child: Icon(
Icons.close,
size: 35,
),
onTap: () => Navigator.of(context, rootNavigator: true).pop('dialog'),
),
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: !isPlaceHolder,
);
}
and here the result
You can use a ListTile and use a IconButton as leading.
ListTile(
leading: IconButton(
icon: Icon(Icons.back),
title: '',
onPressed => Navigator.pop(context),
),
),
Another possibility I see:
As the child from the AppBar
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_buildBack(true, context),
Container(
height: height,
child: Text(
'$_title',
style: Theme.of(context).textTheme.headline2,
),
),
_buildBack(false, context),
],
),
In another place outside the builder.
Widget _buildBack(bool isPlaceHolder, Buildcontext context) {
return Visibility(
child: InkWell(
child: Icon(
Icons.close,
size: widget.height,
),
onTap: () => Navigator.of(context, rootNavigator: true).pop('dialog'),
),
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: !isPlaceHolder,
);
}}
Here there is again a row as you have tried it yourself, but this one is set up a little differently and an iconButton is built before and after the text, but so that the text remains in the center, the second one is made invisible,

Flutter - Draggable text doesn't go to next line

I'd like to make draggable text go to next line if text is too long.
draggable text look like this
return Positioned(
left: position.dx,
top: position.dy,
child: Draggable(
data: widget.index,
child: new GestureDetector(
child: new Text(
widget.caption.caption,
style: new TextStyle(
color: widget.caption.color,
fontSize: widget.caption.fontSize,
),
softWrap: true,
),
onTap: () {
widget.callback(widget.caption, widget.index);
},
),
onDragStarted: widget.setDragging,
onDraggableCanceled: (velocity, offset) {
setState(() {
position = offset;
widget.secondCallback(offset, widget.index);
widget.endDragging();
});
},
feedback: new Material(
type: MaterialType.transparency,
child: new Text(
widget.caption.caption,
style: new TextStyle(
color: widget.caption.color,
fontSize: widget.caption.fontSize),
softWrap: true,
),
),
));
But when I typed long text, still one line and can't see text that overflowed.
I wrapped text with column, flex, flexible, but not wrapping text.
How can I fix this?
Thanks in advance.
Can you wrap your Text like below,
new Row(children: <Widget>[
new Flexible(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(
widget.caption.caption,
style: new TextStyle(
color: widget.caption.color,
fontSize: widget.caption.fontSize,),
softWrap: true,
)
],
),
),
])
Hope it helps