I need to have overflow property of a text at the beginning of the sentence, so instead of
A very looooooooooong senten...
I want the result of the ellipsis to be
...ery looooooooooong sentence.
Can this be set somehow?
According to this github issue, there currently isn't a way to do this with the Material Text Widget's overflow property.
However you can use the ExtendedText() Widget from extended_text package.
#override
Widget build(BuildContext context) {
return const Scaffold(
body: SafeArea(
child: ExtendedText(
'A very looooooooooong sentence.',
maxLines: 1,
overflowWidget: TextOverflowWidget(
position: TextOverflowPosition.start,
child: Text(
"...",
style: TextStyle(fontSize: 23),
),
),
style: TextStyle(fontSize: 27),
),
),
);
}
Related
I am trying to conditionally render widgets based on a state value in MyApp. My idea was the state value would be an integer (1-3). I would have a Map at the top of my project that looks like this:
Map _widgetType = {
1: WidgetOne(),
2: WidgetTwo(),
3: WidgetThree()
};
And then I have a state value called _type that is initialized at 1. I have a function that updates this value based on a selection from a list of options.
void _toggleClipped(int type) {
setState(() {
_type = type;
});
}
The build looks like the below.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(
"Hi! I'm Matt!",
style: TextStyle(fontSize: 25),
),
_widgetType[_type],
Text(
"Click the button below to clip image!",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 25))
],
),
),
);
}
The _widgetType[_type] would be the associated widget being rendered based upon the value for _type.
Is this doable in Flutter? I am getting an error saying The values in a const list literal must be constants. Try removing the keyword 'const' from the list literal.
Good Morning Everybody,
I'm trying to return a Text above a GridView inside a Column. I don't get any error from flutter but when I run it, it only returns the AppBar and nothing else, and in the terminal I get this text:
"Another exception was thrown: Assertion failed: file:///C:/Users/39342/Desktop/Development/Sdk/flutter/packages/flutter/lib/src/rendering/box.dart:1927:12"
Here I give you the code I'm using:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('AppBar Text')),
body: Column(
children: <Widget>[
const Text(
'TEXT EXAMPLE',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30,
),
),
const SizedBox(height: 20),
GridView.count(
crossAxisCount: 5,
mainAxisSpacing: 12.5,
children: <Widget>[],);
Any help or advice will be very much appreciated.
Thank You!
Listview or GridView when used direct inside column cause this error, This is because of layout constraints. Use SizedBox, Container,Expanded as a parent of GridView and it will solve the error.
I am still new to coding, I have created multiple textbutton.icon's but they overflow. How do i stop the overflow. Even if i put is in a row or column it still overflows. I also would like to put more spacing between each row of buttons but that just makes it overflow more. Here is the multiple class code:
class home_buttons {
List<Widget> jeffButtons = [
Button1(),
Button2(),
Button3(),
Button4(),
Button5(),
Button6(),
Button7(),
Button8(),
Button9(),
];
}
Here is the button code:
class Button1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(0.0, 9.0, 0.0, 0.0),
child: TextButton.icon(
onPressed: () => {},
icon: Column(
children: [
Icon(
Icons.search,
color: Colors.white,
size: 75,
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
'Contact Us',
style: TextStyle(
color: Colors.white,
),
),
),
],
),
label: Text(
'', //'Label',
style: TextStyle(
color: Colors.white,
),
),
),
);
}
}
You can wrap your widgets with the SingleChildScrollView to enable scrolling.
Or if you want to fit the screen inside a Column or Row Widget you can wrap individual widgets with a Flexible Widget
Flutter listview normally have undefined height. The total height of listview is defined based on the items in the list. So when you declare listview directly you get overflow issue.
So as a solution you need to specify the height for the outer container, or use sizedbox to define the height.
Specifying height will solve your issue of overflow. To provide space between buttons you can also wrap that in a container and use the benefit of margin or padding to handle it efficiently.
Please find this code snippet to use Media to find height of device
Container(
height: MediaQuery.of(context).size.height,
color: Colors.white,
child: SingleChildScrollView(
child: Column(
children: [
Here instead of SingleChildScrollView You can use listview or listbuilder which will solve your overflow issue
Hope this helps. Let me know If you want more details. Thanks
I'm struggling to fix the following issue shown in the gif. I'm using this package for the timer. And I can't figure it out how to avoid the moving of the countdown timer while counting down. It’s moving because of different widths of each number.
Gif:via GIPHY
Code:
Consumer<RunSettingsModel>(
builder: (context, settings, _) => CustomTimer(
from: Duration(seconds: settings.runDuration),
to: Duration(seconds: 0),
controller: _runController,
builder: (CustomTimerRemainingTime remaining) {
final double percent = 1 -
remaining.duration.inSeconds.toDouble() /
settings.runDuration;
settings.remainingTime = remaining.duration.inSeconds;
return Column(
children: [
Container(
child: Text(
"${remaining.hours}:${remaining.minutes}:${remaining.seconds}",
style: Theme.of(context).textTheme.headline3,
),
),
you can import 'dart:ui';
and then in your Text Widget use a TextStyle of
fontFeatures: [FontFeature.tabularFigures()],
like so:
Text("${remaining.hours}:${remaining.minutes}:${remaining.seconds}",
style: TextStyle(fontSize: 30.0, fontFeatures: [FontFeature.tabularFigures()]),
);
Try to remove the Container wrapping your Text as shown in the custom_timer package.
As you can see, in the package example there is no Container, the Container might be changing it's size because it doesn't have a fixed width and height.
This is the package simple example:
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("CustomTimer example"),
),
body: Center(
child: CustomTimer(
from: Duration(hours: 12),
to: Duration(hours: 0),
onBuildAction: CustomTimerAction.auto_start,
builder: (CustomTimerRemainingTime remaining) {
return Text(
"${remaining.hours}:${remaining.minutes}:${remaining.seconds}",
style: TextStyle(fontSize: 30.0),
);
},
),
),
),
);
}
You should try to separate each digit(hours, minutes and seconds) in its own Text widget and wrap them with a Container to keep them always at the center. I am creating a new widget for the digits because most of the widgets used would repeat themselves.
class DigitsContainer extends StatelessWidget {
const DigitsContainer(
this.text, {
required this.style,
});
final String text;
final TextStyle style;
#override
Widget build(BuildContext context) {
return Expanded(
child: Container(
child: Center(
child: Text("", style: style),
),
),
);
}
}
Then in your main widget.
...
return Column(children: [
DigitsContainer(remaining.hours.toString(), style: style),
Text(":", style: style),
DigitsContainer(remaining.minutes.toString(), style: style),
Text(":", style: style),
DigitsContainer(remaining.minutes.toString(), style: style),
]),
...
Also make sure to wrap this Column in a Container with fixed with so that you dont have problem with the Expanded widget inside the DigitsContainer one. I hope this works.
I have a certain Text widget , when it overflows I have 3 options. Either fade ,visible, ellipsis or clip. But I don't want to choose between them . I want if a text has overflow then don't show the text.
Edit :
I'm working on a code clone to this design
Assuming that the textStyle is unknown.
How could I achieve that?
Code:
class SwipeNavigationBar extends StatefulWidget {
final Widget child;
SwipeNavigationBar({this.child});
#override
_SwipeNavigationBarState createState() => _SwipeNavigationBarState();
}
class _SwipeNavigationBarState extends State<SwipeNavigationBar> {
#override
Widget build(BuildContext context) {
return Consumer<Controller>(
builder: (_, _bloc, __) {
return SafeArea(
child: AnimatedContainer(
duration: Duration(seconds: 01),
color: Colors.white,
curve: Curves.easeIn,
height: !_bloc.x ? 50 : 200,
child: Row(
children: [
Column(
verticalDirection: VerticalDirection.up,
children: [
Expanded(child: Icon(Icons.dashboard)),
Expanded(
child: RotatedBox(
quarterTurns: -45,
child: Text(
'data',
softWrap: false,
style: TextStyle(
textBaseline: TextBaseline.alphabetic
),
),
),
),
],
)
],
),
),
);
},
);
}
}
To mimic the design you might want to look into using the Stack widget. However, to answer your question, you'd want to set softWrap to false.
Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: 100,
child: Text(
'Some text we want to overflow',
softWrap: false,
),
),
)
softWrap is really the key here. Although, I added the Align and SizedBox widgets to allow this to be used anywhere, regardless of what parent widget you are using (since some widgets set tight constraints on their children and will override their children's size preference).
CodePen Example
Edit: 5/6/2020
With the release of Flutter v1.17 you now have access to a new Widget called NavigationRail which may help you with the design you're looking for.
Use ternary operator to check the length of the text that you are passing to the Text widget and based on that pass the text itself or an empty string.
String yourText;
int desiredLengthToShow = 10; //Change this according to you.
...
Text(
child: yourText.length > desiredLengthToShow ? "" : yourText,
);