Transparent app bar and gradient background
In this blog, we will see how to make transparent app
bar and how to give gradient background. Transparent app bar and gradient
background gives an outstanding look to your application.
Demo:
To make the app bar transparent you can use the below
code.
extendBodyBehindAppBar: true,
appBar: AppBar(
title: Text('Dashboard'),
leading: Icon(CupertinoIcons.arrow_left),
actions: [
Icon(CupertinoIcons.bell),
SizedBox(width: 10,),
Icon(CupertinoIcons.add),
SizedBox(width: 10,)
],
backgroundColor: Colors.transparent,
elevation: 0,
),
Now, we will make a new stateless class named as GradientBackground(you
can give any name of your choice) and in this class we will design the gradient
background. Use decoration property inside Container widget, give
BoxDecoration and inside it use gradient property.
You can give various colors of your choice in colors
property inside LinearGradient.
Also you can align the colors using begin and
end property
Use the below code to design gradient background.
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF360603),
Color(0xFF210908),
Color(0xFF0d0504)
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter)),
);
Full code is given below
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'gradient_background.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
title: Text('Dashboard'),
leading: Icon(CupertinoIcons.arrow_left),
actions: [
Icon(CupertinoIcons.bell),
SizedBox(
width: 10,
),
Icon(CupertinoIcons.add),
SizedBox(
width: 10,
)
],
backgroundColor: Colors.transparent,
elevation: 0,
),
body: Stack(
children: [
GradientBackground(),
],
));
}
}
GradientBackground class code:
import 'package:flutter/material.dart';
class GradientBackground extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF360603),
Color(0xFF210908),
Color(0xFF0d0504)
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter)),
);
}
}
You can design and modify this code according to your
choice. I hope this blog will provide you with sufficient information about
this UI. If I got something wrong, let me know in comments, I would like to
improve.
Thank you for scrolling down and reading my blog.
You can reach me through:https://www.linkedin.com/in/charul-mehta-ba845318b
Comments
Post a Comment