The problem is having a Scaffold
or not.
Scaffold
is a helper for Material
apps (AppBar
, Drawer
, that sort of stuff). But you're not forced to use Material
.
What you're missing is an instance of Theme
as a parent.
Why is that important to know? Because when you'll develop a Modal (using showDialog
for example), you'll face the same problem.
BUT Scaffold is an opaque fullscreen widget! And you obviously don't want that in your Modal.
There are many ways to introduce a Theme instance. In Material App, this is usually achieved by instantiating a Material
Widget.
And guess what? Scaffold
creates one for you. But Dialog
too!
1. Solution Summary
FlatButton
and RaisedButton
are deprecated.
So, you can use shape
which placed in the style
property, for TextButton
and ElevatedButton
.
There are some changes since Flutter 2.0:
2. Rounded Button
Inside the style
property exists the shape
property:
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)
)
)
)
Square Button
For a square button you can use ElevatedButton
or otherwise add:
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
side: BorderSide(color: Colors.red)
)
)
)
Complete Example
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
child: Text(
"Add to cart".toUpperCase(),
style: TextStyle(fontSize: 14)
),
style: ButtonStyle(
padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),
foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)
)
)
),
onPressed: () => null
),
SizedBox(width: 10),
ElevatedButton(
child: Text(
"Buy now".toUpperCase(),
style: TextStyle(fontSize: 14)
),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
side: BorderSide(color: Colors.red)
)
)
),
onPressed: () => null
)
]
)
Best Answer
The Problem
As of now, unfortunately, Flutter uses the default Emojis supported on a given platform. Therefore, when building a cross-platform app you may face issues of Emojis showing on certain devices and not on others.
The Solution
The solution I settled for is to use a custom Emoji font such as Emoji One and
RichText
widget instead of the basicText
widget.With this, you can simply have:
Generalized Solution
With this idea, we can even create a custom widget that given a string, builds a
RichText
object with all theTextSpan
s autocreated:Which can be used as:
This has the advantage of having the consistent support of Emojis on your app that you can control on different platforms.
The downside is that it will add some
MBs
to your app.