How do I set the background color of my main screen in Flutter

Question

I m learning Flutter  and I m starting from the very basics  I m not using MaterialApp  What s a good way to set the background color of the whole screen   Here s what I have so far   import  package flutter material dart    void main       runApp new MyApp        class MyApp extends StatelessWidget        This widget is the root of your application     override   Widget build BuildContext context        return new Center child  new Text  Hello  World              Some of my questions are    What s a basic way to set the background color  What exactly am I looking at  on the screen  Which code  is  the background  Is there a thing to set the background color on  If not  what s a simple and appropriate  simple background   in order to paint a background color     Thanks for the help   The code above generates a black screen with white text

User · Answer

You can set background color to All Scaffolds in application at once.

just set scaffoldBackgroundColor: in ThemeData

 MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(scaffoldBackgroundColor: const Color(0xFFEFEFEF)),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );

User · Answer

There are many ways of doing it  I am listing few here     Using backgroundColor  Scaffold    backgroundColor  Colors black    body  Center          Using Container in SizedBox expand  Scaffold    body  SizedBox expand      child  Container        color  Colors black        child  Center                     Using Theme  Theme    data  Theme of context  copyWith scaffoldBackgroundColor  Colors black     child  Scaffold      body  Center

User · Answer

Here s one way that I found to do it  I don t know if there are better ways  or what the trade-offs are   Container  tries to be as big as possible   according to https   flutter io layout    Also  Container can take a decoration  which can be a BoxDecoration  which can have a color  which  is the background color    Here s a sample that does indeed fill the screen with red  and puts  Hello  World   into the center   import  package flutter material dart    void main       runApp new MyApp        class MyApp extends StatelessWidget        This widget is the root of your application     override   Widget build BuildContext context        return new Container        decoration  new BoxDecoration color  Colors red         child  new Center          child  new Text  Hello  World                             Note  the Container is returned by the MyApp build    The Container has a decoration and a child  which is the centered text   See it in action here

User · Answer

Scaffold        backgroundColor  Constants defaulBackground        body  new Container        child  Center yourtext

User · Answer

On the basic example of Flutter you can set with backgroundColor  Colors X of Scaffold     override  Widget build BuildContext context          This method is rerun every time setState is called  for instance as done      by the  incrementCounter method above             The Flutter framework has been optimized to make rerunning build methods       fast  so that you can just rebuild anything that needs updating rather    than having to individually change instances of widgets  return Scaffold    backgroundColor  Colors blue    body  Center         Center is a layout widget  It takes a single child and positions it        in the middle of the parent      child  Column           Column is also layout widget  It takes a list of children and          arranges them vertically  By default  it sizes itself to fit its          children horizontally  and tries to be as tall as its parent                    Invoke  debug painting   press  p  in the console  choose the           Toggle Debug Paint  action from the Flutter Inspector in Android          Studio  or the  Toggle Debug Paint  command in Visual Studio Code           to see the wireframe for each widget                    Column has various properties to control how it sizes itself and          how it positions its children  Here we use mainAxisAlignment to          center the children vertically  the main axis here is the vertical          axis because Columns are vertical  the cross axis would be          horizontal         mainAxisAlignment  MainAxisAlignment center        children   lt Widget gt           Text             You have pushed the button this many times                       Text               counter             style  Theme of context  textTheme display1                                    floatingActionButton  FloatingActionButton      onPressed   incrementCounter      tooltip   Increment       child  Icon Icons add circle           This trailing comma makes auto-formatting nicer for build methods

User · Answer

I  still cannot make this work  Any other ideas

User · Answer

you should return  Scaffold widget and add your widget inside Scaffold suck as this code   import  package flutter material dart    void main       runApp new MyApp        class MyApp extends StatelessWidget        This widget is the root of your application     override   Widget build BuildContext context        return Scaffold            backgroundColor  Colors white            body  Center child  new Text  quot Hello  World  quot

User · Answer

I think you can also use a scaffold to do the white background  Here s some piece of code that may help   import  package flutter material dart   void main     gt  runApp new MyApp     class MyApp extends StatelessWidget      override     Widget build BuildContext context           return new MaterialApp          title   Testing           home  new Scaffold            Here you can set what ever background color you need            backgroundColor  Colors white                                Hope this helps

User · Answer

and it s another approach to change the color of background   import  package flutter material dart    void main     gt  runApp MyApp      class MyApp extends StatelessWidget    override Widget build BuildContext context    return MaterialApp home  Scaffold backgroundColor  Colors pink

User · Answer

I think you need to use MaterialApp widget and use theme and set  primarySwatch with color that you want  look like below code   import  package flutter material dart    void main       runApp new MyApp        class MyApp extends StatelessWidget        This widget is the root of your application     override   Widget build BuildContext context        return new MaterialApp        title   Flutter Demo         theme  new ThemeData          primarySwatch  Colors blue                 home  new MyHomePage title   Flutter Demo Home Page

[dart] How do I set the background color of my main screen in Flutter?

Examples related to dart

Examples related to flutter