How to set a text background with 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()..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 opposite to what happens with other architectures where you start in the main() function, instaciate 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 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 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 to 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.