I would like my text background in Textfield looks like this :
But with this code :
style: TextStyle(
background: Paint()..color = Colors.blue
..style = PaintingStyle.fill,
color: Colors.white,
),
I have this result :
There is no padding, no rounded corners and a transparent line between both...
How can I do this ?
EDIT :
Another way with TextStyle
was provided by @Csaba Mihaly but this is a workaround I want to avoid. I'm looking for a custom paint solution
EDIT :
According answers provided PaintStyle.stroke can be used but it's not 100% matching the expected result (first screen) :
No matter the text size is, in order to fill the empty space the stroke width must be bigger as I can see. It will render a large padding and corner radius. In my case :
Steps to change TextField background color in Flutter Step 1: Locate the file where you have placed the TextField widget. Step 2: Inside the TextField widget, add the decoration parameter and assign the InputDecoration widget. Step 3: Inside the InputDecoration widget, add the filled parameter and set it to true .
To add border radius or create rounded border around the TextField widget, add the decoration property and then use OutlineInputBorder widget. The OutlineInputBorder widget accepts the borderRadius parameter. You can use the borderRadius parameter with BorderRadius.
In this blog post, let’s check how to change the default color of TextField border in Flutter. You can change the border color of your TextField using InputDecoration class, OutlineInputBorder class, and BorderSide class. See the code snippet given below.
Finally, I discovered how to change the background color of the TextFormField Widget. Set the filled property of the TextFormField Widget to true and the fillColor property to the desired color. i.e., fillColor: Colors.white, filled: true, Code
The following examples show you how to make rounded-corners text fields in Flutter. Our strategy is to remove the TextField’s border and wrap it inside a Container with circular BorderRadius (this Container itself should be wrapped by another Container with alignment property).
Output is shown at the top. In this way, you can add Gradient color on text in Flutter using Package or without using Package. Flutter is known for its beautiful user interface (UI) design, in this guide as well, we are going to show you the way to set linear gradient background on Container.
You code snippet will work if you add ..strokeWidth = 20
to the style, e.g.:
Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
textAlign: TextAlign.center,
style: TextStyle(
background: Paint()
..color = Colors.blue
..strokeWidth = 20
..strokeJoin = StrokeJoin.round
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke,
color: Colors.white,
))
Stroke width defines the 'fatness' of the area around the text. Though to be accurate, the inside corners (look near word 'industry') are not rounded, I doubt text background can fix that.
Also please not that if you're targeting Web you might need to use Skia renderer instead of HTML renderer(https://stackoverflow.com/a/69975665/440696) in order to avoid the following artefact:
Just give the desired strokeWidth
value and it will work fine.
Output Image
style: TextStyle(
background: Paint()
..strokeWidth = 17
..color = Colors.blue
..strokeJoin = StrokeJoin.round
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke,
color: Colors.black,
)
I created a package called rounded_background_text
to achive this
https://pub.dev/packages/rounded_background_text
Usage:
import 'package:rounded_background_text/rounded_background_text.dart';
RoundedBackgroundText(
'A cool text to be highlighted',
style: const TextStyle(fontWeight: FontWeight.bold),
backgroundColor: Colors.white,
),
TextFields are also supported
So I found this article https://medium.com/@pinkesh.earth/flutter-quick-tip-how-to-set-text-background-color-with-curve-d40a2f96a415 It describes how to use textstyle to look like what you want, but it doesn't exactly work like that, I don't know why. It draws the next line's background above the previous.
I managed to work around it (bug?) by stacking two textfields(one has transparent text, the other transparent background).
The result:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final myControllerName = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
inputDecorationTheme: const InputDecorationTheme(
fillColor: Colors.transparent,
filled: true,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
),
border: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
),
)),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Stack(
children: [
IntrinsicWidth(
child: TextField(
controller: myControllerName,
style: TextStyle(
color: Colors.transparent,
fontWeight: FontWeight.w600,
fontSize: 20,
background: Paint()
..strokeWidth = 25
..color = Colors.blue
..style = PaintingStyle.stroke
..strokeJoin = StrokeJoin.round),
keyboardType: TextInputType.multiline,
maxLines: null,
textAlign: TextAlign.center,
),
),
IntrinsicWidth(
child: TextField(
controller: myControllerName,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 20,
backgroundColor: Colors.transparent),
keyboardType: TextInputType.multiline,
maxLines: null,
textAlign: TextAlign.center,
),
)
],
))));
}
}
Do like this:
style: TextStyle(
background: Paint()..color = Colors.blue
..strokeJoin = StrokeJoin.round
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..strokeWidth = 30.0,
color: Colors.white,
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With