Hy everyone,
I need to know, how can I create gradient on top right of the page like this picture?
I tried with this code, but it's still not working for me:
Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Stack(
children: [
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.center,
stops: [
0.01,
0.3,
0.4,
],
colors: [
Color(0xff2DBA61),
Colors.yellow,
Colors.white,
],
),
),
),
],
),
),
),
here is the result
Thank you. any kind of help will be appreciated!
Just wrap your Scaffold inside a DecoratedBox or a Container and set its backgroundColor property to Colors.transparent.
Code sample
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.center,
stops: [0.01, 0.3, 0.4],
colors: [
Color(0xff2DBA61),
Colors.yellow,
Colors.white,
],
),
),
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
leading: const BackButton(color: Colors.black),
),
),
);
}
}
Result
Try the full example on DartPad
Related
My code for a page is like this. i need to scroll part below appbar.
#override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.deepPurple, Colors.black]
)
),
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
leading: IconButton(
icon: Image.asset("assets/images/logo1.png"),
iconSize: 100,
onPressed: null,
),
title: Text("Home"),
//centerTitle: true
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.deepPurple, Colors.white]
)
),
),
//search button for admin pannel
// actions: <Widget>[
// IconButton(
// icon: Icon(Icons.search),
// onPressed: () {
// // your onPressed function here
// },
// ),
// ],
),
),
);
i want the body area to be scrolled, with that gradient background.
You can wrap body parent widget with SingleChildScrollView for scrolling body...
body: SingleChildScrollView(
child: Column(
children: [],
),
),
Use SingleChildScrollView or Listview. if you are using Listview inside a Column, Try to use Shrinkwrap = true in Listview.
Is it possible to explicitly set gradient color for the status bar? 'statusBarColor' expects Color, but what about gradient? How to paint status bar in gradient? If I use SafeArea, status bar is white. But my SliverAppBar is painted in gradient color.
Scaffold(
body: SafeArea(
child: CustomScrollView(
slivers: [
SliverAppBar(
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(
'My App',
style: TextStyle(
fontSize: 16.0,
),
),
background: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFF50AC5B),
Color(0xFF92C156),
],
),
),
),
),
elevation: 0.0,
floating: true,
),
SliverList(
delegate: SliverChildListDelegate(
[
//...
],
),
),
],
),
),
backgroundColor: const Color(0xFFFBFDFF),
);
}
}
Wrap your SafeArea into a Container that adds a background gradient
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFF50AC5B),
Color(0xFF92C156),
],
),
),
child: SafeArea(
child: // your code,
),
),
or just turn off your SafeArea in the top portion of the app if it's not required there, like this:
SafeArea(
top: false,
child: // your code,
),
Let me know if any of this solution works.
Below worked and tested code :
Explanation :
How we get this red shaded status bar?
We have wrapped SafeArea widget by scaffold. In body property we have using container with gradient color so it occupies whole screen...If we use body without appbar it takes whole screen as a body. then we can use remaining body spaces by some other Widgets(as per our requirement)
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromRGBO(232, 66, 66, 1.0),
Color.fromRGBO(231, 33, 33, 1.0),
Color.fromRGBO(238, 5, 5, 1.0)
],
)
),
child: SafeArea(
child: CustomScrollView(
slivers: [
SliverAppBar(
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: const Text(
'My App',
style: TextStyle(
fontSize: 16.0,
),
),
background: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFF50AC5B),
Color(0xFF92C156),
],
),
),
),
),
elevation: 0.0,
floating: true,
),
SliverList(
delegate: SliverChildListDelegate(
[
Container(
color: Colors.white,
height: MediaQuery.of(context).size.height,
),
],
),
),
],
),
),
),
);
}
I'm trying to achieve this design:
I also want to use a Card widget provided by Flutter. It comes with some nice theming support that I'd like to use (CardTheme).
So don't know how to give a LinearGradient to a Card. Here's what I tried to do with combining a Card with Container:
Card(
child: Container(
margin: EdgeInsets.all(5),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
cardBorderColor,
Theme.of(context).colorScheme.surface,
],
stops: [0, 0.8],
),
),
child: ...
As you can see, the border radius of the card is respected when positioning the Container.
Setting the clipBehavior property of the Card to Clip.antiAlias achieves the desired outcome:
Card(
clipBehavior: Clip.antiAlias, // <-- this did the trick
margin: EdgeInsets.all(5),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
cardBorderColor,
Theme.of(context).colorScheme.surface,
],
stops: [0, 0.8],
),
),
child: ...
use DecoratedBox instead of Container
You can use borderRadius: BorderRadius.circular(x), there, and wrap everything with ClipRRect for Card color. You may have good reason to have Card and I don't know that, but you check Material widget and with it will be simple to archive, like not to handling extra border/override color of by Card.
Result
Widget
class DX extends StatelessWidget {
const DX({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.deepPurple,
body: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(35), //* you can increase it
child: Card(
color: Colors
.transparent, //* or set the bg Color and remove [ClipRRect]
child: Container(
width: 400,
height: 100,
// margin: EdgeInsets.all(5),
decoration: BoxDecoration(
border: Border.all(width: 0, color: Colors.transparent),
borderRadius: BorderRadius.circular(22),
gradient: LinearGradient(
colors: [
Colors.red,
// cardBorderColor,
Theme.of(context).colorScheme.surface,
],
stops: [0, 0.8],
),
),
child: Center(child: Text("asdasd")),
),
),
),
),
);
}
}
is it possible to draw a gradient where I can define the color for each edge (topRight, bottomRight, bottomLeft and topLeft)? As you can see on the image, I have two different gradients. Now I need to combine these in the white area.
I guess there is no easy solution to that in flutter, you can play around about two LinearGradients with ShaderMask or double container with opacity, but both will not give you robust solution:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: Text('Material App Bar'),
),
body: Center(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.red,
Colors.green,
]),
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.black.withOpacity(0.5),
Colors.white.withOpacity(0.5),
]),
),
),
)),
),
);
}
}
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),
),
],
),
),
),
);
}
}
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 image
child: Align(
alignment: Alignment.center,
child: Image.asset(
"images/logo.png",
width: 128,
height: 128,
)),
),
Hope this helps.
In Your Code - Under Scaffold add - backgroundColor: Colors.transparent,
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
..
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
],
),
),
),
),
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,
)),
),
),
);
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
])
),
),
),
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])
)
),
);
}
}