wrapping Scaffold with Container for gradient background, How to set gradient to container background in flutter?
FlutterDartContainersGradientFlutter Problem Overview
I'd like to wrap a Scaffold
with a Container
in order to get a gradient background that's also underneath the AppBar
. Basically a full screen gradient
background. However, my attempt doesn't do anything.
Is there another way of doing it, where I can keep the AppBar
functionality but have it on top of a gradient
that spans the whole screen?
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test',
theme: ThemeData(
primarySwatch: Colors.yellow,
),
home: MyHomePage(title: 'Test'),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
stops: [0.1, 0.5, 0.7, 0.9],
colors: [
Colors.yellow[800],
Colors.yellow[700],
Colors.yellow[600],
Colors.yellow[400],
],
),
),
child: Scaffold(
appBar: AppBar(
title: Icon(Icons.menu),
backgroundColor: Color(0x00000000),
elevation: 0.0,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'dummy text',
),
Text(
'5',
style: Theme.of(context).textTheme.display1,
),
FloatingActionButton(
backgroundColor: Colors.white,
foregroundColor: Colors.black45,
elevation: 0.0,
onPressed: () {},
tooltip: 'Play',
child: Icon(Icons.play_arrow),
),
],
),
),
),
);
}
}
Flutter Solutions
Solution 1 - Flutter
You can also add a gradient to the AppBar
like this,
new Scaffold(
appBar: AppBar(
title: Center(child: Text('Awesome AppBar')),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFF3366FF),
const Color(0xFF00CCFF),
],
begin: const FractionalOffset(0.0, 0.0),
end: const FractionalOffset(1.0, 0.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp),
),
),
child: ...,
),
body: ...,
);
LinearGradient parameters:
-
colors
: an array of the colors to be used in the gradient, in this case, two shades of blue. -
begin
,end
: position of the first color and the last color, in this case, -
FractionalOffset
allows us to treat the coordinates as a range from 0 to 1 both for x and y. As we want an horizontal gradient, we use same Y for both measures, and the x changes from 0.0 (left) to 1.0 (right). -
stops
: this array should have the same size than colors. It defines how the colors will distribute. [0.0, 1.0] will fill it from left to right. [0.0, 0.5] will fill the colors from left to half bar, etc. -
tileMode
: what to do if the stops do not fill the whole area. In this case, we added clamp (it will reuse the last color used), but as our gradient goes from 0.0 to 1.0, it’s not really necessary. -
You can also add a child to the
Container
. e.g: some logo imagechild: Align( alignment: Alignment.center, child: Image.asset( "images/logo.png", width: 128, height: 128, )), ),
Hope this helps.
Solution 2 - Flutter
In Your Code - Under Scaffold
add - backgroundColor: Colors.transparent,
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
..
Solution 3 - Flutter
Simply add FlexibleSpace
in AppBar
and Decorate the container. Then the app bar is a gradient in the background.
appBar: AppBar(
title: Text('Flutter Demo'),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: <Color>[
Colors.red,
Colors.blue
],
),
),
),
),
Solution 4 - Flutter
I used this piece of code to set background
color as a gradient
return MaterialApp(
home: Scaffold(
body: Container(
decoration: new BoxDecoration(
gradient: new LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromARGB(255, 25,178,238),
Color.fromARGB(255, 21,236,229)
],
)),
child: Align(
alignment: Alignment.center,
child: Image.asset(
"images/app_logo.png",
width: 128,
height: 128,
)),
),
),
);
Solution 5 - Flutter
You simply use FlexibleSpace in the appbar
appBar: AppBar(
centerTitle: true,
title: Text(widget.title),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[
Colors.red,
Colors.blue
])
),
),
),
Solution 6 - Flutter
You can use directly below code for gradient color of any container or view
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dashboard"),
),
body: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.red, Colors.blue, Colors.black])
)
),
);
}
}