Dear Stackoverflow People,
I need to program a button in Flutter as follows:
How can I do that in Flutter?
I have the problem that TextButton() allows only to add "one line of text". However, I need a title and a description with different font sizes within a button. How can this be done?
Thanks a lot!
You can use Text.rich widget as a TextButton child. I tried on this online IDE and it works.In Text.rich , You can define List<TextSpan> children, and add text spans has different Text Styles . My code sample is here:
TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(16.0),
primary: Colors.white,
textStyle: const TextStyle(fontSize: 20),
),
onPressed: () {},
child: const Text.rich(
TextSpan(
text: 'Hello', // default text style
children: <TextSpan>[
TextSpan(text: ' beautiful\n', style: TextStyle(fontStyle: FontStyle.italic)),
TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
],
),
),
)
Try below code hope its helpful to you. you can use Inkwell or GestureDetector Widget
InkWell(
onTap: () {
// write here your button pressed function
print('Button Pressed');
},
child: Container(
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(15.0),
),
child: ListTile(
title: Text('Language'),
subtitle: Text('Tap to change'),
),
),
),
Your result screen->
You could create your own button.
Something like this:
GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("text big"),
Text("text small"),
],
),
),
),
You can give "Column" (with your text) to the "child" property of any button.
in your case OutlinedButton
OutlinedButton(
onPressed: () {},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Language',
style: Theme.of(context).textTheme.subtitle1,
),
Text(
'Tap To Change',
style: Theme.of(context).textTheme.caption,
),
],
),
),
and then you can use the style properties of Test Widget to change their style
You can use this
Text("Language\nTap To Change")
Related
I recently picked up Flutter and Dart and am attempting to create an app that has a modal with three parts: a header, actual content, and a footer.
For the header I am looking to add a title (Text) center aligned and a close button right aligned.
I have the following code:
Column(
children: [
Row(
children: [
Expanded(
child: Text(
"Filters",
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
IconButton(
icon: const Icon(Icons.close),
onPressed: () {
Navigator.pop(context);
},
),
],
),
],
),
)
Visually, this looks like so:
At a glance this looks fine but if you stare at it for a bit it doesn't. The "Filters" title isn't actually centered because (I assume) of the width of the X-button. I am struggling to figure out how to deal with this.
What is the proper way to solve this?
You can add empty SizedBox with width as much as IconButton takes, try this:
Row(
children: [
SizedBox(
width: width: 24 +
8 +
8, // the default size of icon + two default horizontal padding for IconButton
),
Expanded(
child: Text(
"Filters",
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
IconButton(
icon: const Icon(Icons.close),
onPressed: () {
Navigator.pop(context);
},
),
],
),
or you can add on other IconButton with opacity 0 to hide the button and make title center, like this:
Row(
children: [
Opacity(
opacity: 0,
child: IconButton(
icon: const Icon(Icons.close),
onPressed: () {},
),
),
Expanded(
child: Text(
"Filters",
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
IconButton(
icon: const Icon(Icons.close),
onPressed: () {
Navigator.pop(context);
},
),
],
),
Is there a way to add a TextButton or Button to a Tooltip?
I want to display a summary in the Tooltip, with a link to an article that explains more about it.
Using a richMessage with a GestureDetector doesn't seem to work as tapping anywhere on the tooltip will close the tooltip instead of triggering the onTap:
Tooltip(
preferBelow: false,
padding: EdgeInsets.all(12.0),
showDuration: Duration(
seconds: 10,
),
richMessage: TextSpan(
text: "This is some basic info... ",
children: <InlineSpan>[
WidgetSpan(
alignment: PlaceholderAlignment.baseline,
baseline: TextBaseline.alphabetic,
child: GestureDetector(
onTap: (() {
bloc.launchURL(
LaunchLink.learnMore,
);
}),
child: TextButton(
child: Text(
'LEARN MORE',
style: TextStyle(color: Colors.blue),
),
onPressed: (() {
bloc.launchURL(
LaunchLink.learnMore,
);
}),
),
)),
const TextSpan(
text: '.',
),
],
),
triggerMode: TooltipTriggerMode.tap,
child: Icon(
Icons.info_rounded,
color: Color(AppColors.blue),
size: 18,
),
),
Assign a key to tool tip
final key = GlobalKey();
Tooltip(
key: key,
...
),
then on pressed you can make keep it visible like
onPressed: () {
final dynamic _tooltip = key.currentState;
_tooltip.ensureTooltipVisible();
},
and to close the tooltip you can use
tooltip.deactivate()
Is there a way to add a title box to a card in the Flutter Material design? So far I've got to:
Card(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
side: BorderSide(color: Colors.black)
),
child: ...
)
But I can't figure out how to add the title decoration. Is there a way? The picture below is roughly what I'm trying to achieve.
In material design the title of a card wouldn't float over the border, as your picture - although it is possible to make, as we see in textFormField decoration.
Below a code of Material 2 for building a card. You can find other examples and how to theme your card in the link: https://material.io/components/cards/flutter#card
Card(
clipBehavior: Clip.antiAlias,
child: Column(
children: [
ListTile(
leading: Icon(Icons.arrow_drop_down_circle),
title: const Text('Card title 1'),
subtitle: Text(
'Secondary Text',
style: TextStyle(color: Colors.black.withOpacity(0.6)),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'Greyhound divisively hello coldly wonderfully marginally far upon excluding.',
style: TextStyle(color: Colors.black.withOpacity(0.6)),
),
),
ButtonBar(
alignment: MainAxisAlignment.start,
children: [
FlatButton(
textColor: const Color(0xFF6200EE),
onPressed: () {
// Perform some action
},
child: const Text('ACTION 1'),
),
FlatButton(
textColor: const Color(0xFF6200EE),
onPressed: () {
// Perform some action
},
child: const Text('ACTION 2'),
),
],
),
Image.asset('assets/card-sample-image.jpg'),
Image.asset('assets/card-sample-image-2.jpg'),
],
),
),
I have problem adding pad for the OutlinedButton, I have been using OutlineButton and I have decided to OutlinedButton because the button is depreciated. However, the usage of the button is different where the padding parameter is undefined. I have tried wrapping OutlinedButton in ButtonTheme but it does not have any effect and now I am using Padding as shown in the code example below.
new Column(children: [
new Row(children: [
//5th row
new Expanded(
child: Padding(
child: new OutlinedButton(
child: new Text(
"Main Page",
style: TextStyle(
fontFamily: 'NotoSans',
fontSize: 20.0,
fontWeight: FontWeight.w400),
),
onPressed: () {
Navigator.of(context).push(_gotoMainPage());
},
padding: EdgeInsets.all(20),
)),
)
]),
])
],
),
Thanks in advance.
Both OutlinedButton and ElevatedButton have a styleFrom method you can use to set things like padding, color, and shape:
OutlinedButton(
child: Text('Padded Button'),
onPressed: (){
},
style: OutlinedButton.styleFrom(
padding: EdgeInsets.all(8),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16)
)
),
)
I'm trying to implement this view.
I got very close except the smaller dollar sign, now I'm using text mask and appending the dollar sign, but of course, it has same font size view rest of the view
Here is the code
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(width: 8),
IconButton(
icon: Image.asset("assets/images/minus.png"),
onPressed: () => {},
),
Expanded(
child: TextFormField(
controller: controller,
keyboardType: TextInputType.number,
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
textAlign: TextAlign.center,
style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold, color: kSecondaryColor),
decoration: new InputDecoration.collapsed(hintText: ''),
),
),
IconButton(
icon: Image.asset("assets/images/plus.png"),
onPressed: () => {},
),
SizedBox(width: 8),
],
),
Would be easy to do if I can change the font size of the first character of the TextField or maybe I should use different widget for only dollar sign, but I couldn't manage it to place it inside Expanded.
leadingIcon property of TextFormField puts the sign to beginning of the field, so symbol doesn't follow the text it just stays there, so that it didn't work for me.
prefixText property is also puts the text far away from actualy numbers like this, if I can fix that, that also works.
Update
You need to get rid of Expanded as it won't push the prefix widget with your text. There are other ways to achieve the same effect. You can use Flexible instead to allow TextFormField to be only as big as it needs to be. InputDecoration has a prefix: property that is not available under the .collapsed constructor, so you can remove the border using InputBorder.none instead. Overall you need to make the following changes:
Row(
children: [
SizedBox(width: 8),
IconButton(
icon: Icon(Icons.add),
onPressed: () => {},
),
Spacer(), //<-- This is what I've been telling to add
Flexible( //<-- Change Expanded to Flexible
child: TextFormField(
initialValue: '234',
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
color: Colors.purple,
),
decoration: InputDecoration( //<-- Removed collapsed factory constructor
border: InputBorder.none, //<-- Use this to remove the border
prefix: Text( //<-- This is your actual prefix Widget
"\$",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.purple,
),
),
),
),
),
Spacer(), //<-- This is what I've been telling to add
IconButton(
icon: Icon(Icons.add),
onPressed: () => {},
),
SizedBox(width: 8),
],
),
);
This is the final output
Would wrapping the TextFormField inside a Row, along with Text widget to hold $ help?
Also take care to put MainAxisSize.min, so that both the widgets stay together.
Update
Putting up the code, do not wrap Expanded, bring the changes inside child of Expanded. I have added 4 comments, which are the changes you will need to bring in.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(width: 8),
IconButton(
icon: Icon(Icons.remove),
onPressed: () => {},
),
Expanded(
//1. Intrinsic height is used to place so that its child ROW doesn't take // the whole height
child: IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Align(
// 2. This alignment will align $ with the bottom of textfield.
alignment: Alignment(0.0, 0.5),
child: Text(
"\$",
style: TextStyle(
//3. dollar symbol to have a different font size.
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blue),
),
),
SizedBox(
//4. You might need to change the width here, this is the width available //for TextFormField. Logic used here is
//half of the (available screen width - size of the icons at left n right)
width: ((MediaQuery.of(context).size.width - 48) / 2),
child: TextFormField(
// controller: controller,
keyboardType: TextInputType.number,
// inputFormatters: [FilteringTextInputFormatter.digitsOnly],
// textAlign: TextAlign.center,
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
color: Colors.blue),
decoration: new InputDecoration.collapsed(hintText: ''),
),
),
]),
),
),
IconButton(
icon: Icon(Icons.add),
onPressed: () => {},
),
SizedBox(width: 8),
],
),