Flutter — Background Color in Layouts .

VNBNews.vn
Nov 7 · 3 min read

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).

Way 1 : use color with Colors class

child: Container(

//Set background for container.
color: Colors.redAccent,
child:
Container(child: ColorLoader2(color1: Colors.redAccent, color2: Colors.deepPurple, color3: Colors.green),),

)

Way 2 : use decoration with BoxDecoration

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!"),
),
);
}
}

Example 2

class LoadingPage extends StatelessWidget {
// This widget is the root of your application.

@override
Widget build(BuildContext context) {
return new Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.deepPurple,
),
child: Container(
child: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Container(

color: Colors.redAccent,
child:
Container(child: ColorLoader2(color1: Colors.redAccent, color2: Colors.deepPurple, color3: Colors.green),),

),
),
)
);
}
}

and….. My screenshot

Colors class in Flutter :

Color and ColorSwatch constants which represent Material design’s color palette.

Instead of using an absolute color from these palettes, consider using Theme.of to obtain the local ThemeData structure, which exposes the colors selected for the current theme, such as ThemeData.primaryColor and ThemeData.accentColor (among many others).

Most swatches have colors from 100 to 900 in increments of one hundred, plus the color 50. The smaller the number, the more pale the color. The greater the number, the darker the color. The accent swatches (e.g. redAccent) only have the values 100, 200, 400, and 700.

In addition, a series of blacks and whites with common opacities are available. For example, black54 is a pure black with 54% opacity.

Color selection = Colors.green[400]; // Selects a mid-range green.

Container( color: Colors.blue, // same as Colors.blue[500] or Colors.blue.shade500 )

Full document about colors at here :

CodeSpace69

Talk about bugs.

VNBNews.vn

Written by

Vnbnews.vn

CodeSpace69

Talk about bugs.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade