Related
I've been updating a Flutter app and replaced a FlatButton with the new TextButton. But now the button doesn't display on the Card. I can click it and it works, and if I long press you can see the button and it's caption.
The card widget code is below.
Card otherSwapCard(
List<FSRows?> data, int index, context, Function circularprogress) {
String? shiftDate = formatJsonDate(data[index]!.shiftDate!, 'dd/MM/yyyy');
//calculate time value string
String shiftTimes =
'${formatJsonTime24To12(data[index]!.startTime!)} - ${formatJsonTime24To12(data[index]!.finishTime!)}';
return Card(
color: Colors.white,
elevation: 3,
margin: EdgeInsets.fromLTRB(16, 4, 16, 12),
child: Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(
width: 2.0,
color: kMainColor40,
),
),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Expanded(
flex: 72,
child: Column(
children: <Widget>[
DataKeyRow(dkLabel: 'Job:', dkValue: data[index]!.jobName!),
SizedBox(height: 2),
DataKeyRow(dkLabel: 'Date:', dkValue: shiftDate!),
SizedBox(height: 2),
DataKeyRow(
dkLabel: 'Time:', dkValue: shiftTimes.toLowerCase()),
],
),
),
Expanded(
flex: 28,
child: Center(
child: TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
),
child: Text('Fill', style: TextStyle(color: Colors.white)),
onPressed: () { },
),
),
),
],
),
),
),
);
}
Card, TextButton, and Text three are in white color. So trying changing the color of the Button or Text.
To change the TextButton color
TextButton(
onPressed: () {},
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.black, // Background Color
),
child: const Text(
'Text Button ',
style: TextStyle(fontSize: 24),
),
)
The backgroundColor will change the TextButton background color to black and the primary will change the font color to white, you can customize it accordingly.
Both your Card color and TextButton Text color are White, you just need to change one of them.
I copied your code and change the color and everything went fine.
Card(
color: Colors.white,
TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
),
child: Text('Fill', style: TextStyle(color: Colors.**white**)),
onPressed: () { },
),
Card and TextButton both are in white color , so try changing your code.
Change
child: Text('Fill', style: TextStyle(color: Colors.white)),
to
child: Text('Fill', style: TextStyle(color: Colors.black)),
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'),
],
),
),
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")
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(''),
);
I'm trying to implement a button that calls another page when it is tapped.
I'm wrapping a container with the inkWell widget that has a splash color effect and the onTap (){}.
The button shows the splash color effect with the onTap (){} empty however when I add a Navigator.push.. to call another page, the splash color effect disappears.
Any idea about how to solve this?
This is the code
Padding(
padding: const EdgeInsets.only(top: 11),
child: Material(
color: Colors.white,
child: InkWell(
splashColor: Colors.grey,
onTap: () {
Navigator.push(
context,
PageTransition(
type: PageTransitionType.downToUp,
duration: Duration(milliseconds: 200),
child: ProfileProduct(
imageUrl: widget.reviews.imageUrl,
cost: widget.reviews.cost,
name: widget.reviews.userName,
address: widget.reviews.address,
brand: widget.reviews.brand,
productName: widget.reviews.productName,
userImage: widget.reviews.userImage,
currentUserId: widget.reviews.authorId,
cSrateStars: widget.reviews.cSrateStars,
easyPurchaseRateStars:
widget.reviews.easyPurchaseRateStars,
envioDiasRateStars: widget.reviews.envioDiasRateStars,
totalRate: widget.reviews.totalRate,
recomendation: widget.reviews.recomendation,
businessName: widget.reviews.businessName,
fecha: widget.reviews.timestamp,
videoLink: widget.reviews.videoLink,
),
),
);
},
child: Container(
// margin: EdgeInsets.only(top: 10),
height: 280,
width: 190,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 10, top: 2),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CircleAvatar(
radius: 12.0,
backgroundColor: Colors.grey,
backgroundImage: widget
.reviews.userImage.isEmpty
? AssetImage(
'assets/images/user_placeholder.jpg')
: CachedNetworkImageProvider(
widget.reviews.userImage),
),
SizedBox(width: 0.0),
Text(
widget.reviews.userName,
style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w700),
),
IconButton(
// alignment: Alignment.topLeft,
icon: _isLiked
? Icon(
Icons.favorite,
color: Colors.red,
)
: Icon(Icons.favorite_border),
iconSize: 15.0,
onPressed: _likePost,
),
],
),
),
AutoSizeText(
widget.reviews.productName,
maxLines: 4,
style: TextStyle(color: Colors.blue, fontSize: 20),
),
SizedBox(height: 3.0),
RatingStars(widget: widget),
SizedBox(height: 8.0),
AutoSizeText(
'$costos',
maxLines: 4,
style: TextStyle(color: Colors.grey),
),
SizedBox(height: 3.0),
Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: AutoSizeText(
widget.reviews.comments,
maxLines: 3,
style: TextStyle(color: Colors.grey),
),
),
// SizedBox(height: 3.0),
AutoSizeText(
'See More...',
maxLines: 4,
style: TextStyle(color: Colors.blue),
),
Text(
'${_likeCount.toString()} likes',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
),
),
I was in the same problem and realised the "NewPage()" loads before the Inkwell splash is shown. I did a small hack by delaying the Navigator.push by 300 milliseconds. It seems to work.
InkWell(
splashColor: Colors.grey,
onTap: () {
Future.delayed(const Duration(milliseconds: 300), () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => NextPage()));
});
},
child:Somewidget,
)
The InkWell widget must have a Material widget as an ancestor. The Material widget is where the ink reactions are actually painted. This matches the material design premise wherein the Material is what is actually reacting to touches by spreading ink.
The ink splashes aren't visible!
If there is an opaque graphic, e.g. painted using a Container, Image, or DecoratedBox, between the Material widget and the InkWell widget, then the splash won't be visible because it will be under the opaque graphic. This is because ink splashes draw on the underlying Material itself, as if the ink was spreading inside the material.
The Ink widget can be used as a replacement for Image, Container, or DecoratedBox to ensure that the image or decoration also paints in the Material itself, below the ink.
editing you widget as per description above
Material(
child: InkWell(
onTap: () {
print("tapped me");
},
splashColor: Colors.grey,....
You must have an onTap: in the inkwell else the splash will not appear even after wrapping it with material