How to set a text background with Flutter? - flutter

Question

I'm very new to flutter but I'm interested in learning it pretty much from the beginning.
Right now I'm trying such a basic thing as changing the background color of some text, but I'm stuck.
import 'package:flutter/material.dart';
void main() {
final barColor = const Color(0xFFD63031);
var app = MaterialApp(
home: Scaffold(
backgroundColor: barColor,
),
);
Center(
child: Text('My Text',
textDirection: TextDirection.ltr,
),
);
runApp(app);
}
I do understand why the text doesn't show but I've been working on this for days now and I have tried a lot of different things without succeeding, so any help would be very appreciated.
Thank You

Answer 1

TL;DR - (Updated 07-08-2019)
Using style property (backgroundColor)
Text(
'Some text...',
style: TextStyle(backgroundColor: Colors.blue),
)
Using style property (background)
Text(
'Some text...',
style: TextStyle(background: Paint()..color = Colors.blue),
)
Using a DecoratedBox
const DecoratedBox(
decoration: const BoxDecoration(color: Colors.blue),
child: const Text('Some text...'),
);
Long answer
First of all, welcome to Flutter and StackOverflow :)
That happens because are misunderstand the way you should develop with Flutter.
As opposed to what happens with other architectures where you start in the main() function, instantiate your vars/objects and develop your flow from there, with Flutter you start your widget tree from your main() function as well, usually with a MaterialApp or CupertinoApp and fit in all its children to create your app.
So, as an example to get what you want, you must add your Center widget as the body of your Scaffold and then give a TextStyle to your Text widget, providing the property color. I gave it blue, but you can give it anything else you want. Thereby, this is your refactored code:
void main() => runApp(
MaterialApp(
home: Scaffold(
backgroundColor: const Color(0xFFD63031),
body: Center(
child: Text(
'MyText',
textDirection: TextDirection.ltr,
style: TextStyle(
background: Paint()..color = Colors.blue,
),
),
),
),
),
);
that will provide the following result
I suggest you take a look at the Awesome Flutter repo where you have a lot of good Flutter content to start with that can really help you out.

Answer 2

Simple you can set it in style property..
Text(
'My Text...',
style: TextStyle(backgroundColor: Colors.grey),
)
You can set this many properties to text in style: TextStyle()
{ bool inherit = true,
Color color,
Color backgroundColor,
double fontSize,
FontWeight fontWeight,
FontStyle fontStyle,
double letterSpacing,
double wordSpacing,
TextBaseline textBaseline,
double height,
Locale locale,
Paint foreground,
Paint background,
List<Shadow> shadows,
List<FontFeature> fontFeatures,
TextDecoration decoration,
Color decorationColor,
TextDecorationStyle decorationStyle,
double decorationThickness,
String debugLabel,
String fontFamily,
List<String> fontFamilyFallback,
String package
}