Flutter - Gradient AppBar
Last Updated :
06 Jan, 2023
AppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a flutter application are a widget or a combination of widgets. So AppBar is also a built-in class or widget in flutter which gives the functionality of the AppBar out of the box. Approximately Every mobile Application has AppBar in it which makes the Application well and good. In this article, we will see Gradient AppBar and cover the following content.
- Simple Light AppBar
- Simple Dark AppBar
- AppBar yellow Background with Red Text
- Gradient AppBar Background
- AppBar Grey background centered Indigo Text with the left icon
- AppBar with Left and Right side icons
- AppBar with Double icons on Sides
- AppBar Preferred Size
Simple Light AppBar
Turn the Main Background color to light.
Code
Dart
import 'package:flutter/material.dart';
void main() => runApp(SimpleAppBarLightRun());
// stateless widget
class SimpleAppBarLightRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
// MaterialApp
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.light(),
// scaffold
home: Scaffold(
// appbar with title property
appBar: AppBar(
title: Text('App Bar'),
),
),
);
}
}
Output:
light appbarSimple Dark AppBar
In the MaterialApp, make the theme Dark, Turn the main background color to dark.
Code
Dart
import 'package:flutter/material.dart';
void main() => runApp(SimpleAppBarLightRun());
class SimpleAppBarLightRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.dark(),
home: Scaffold(
appBar: AppBar(
title: Text('App Bar'),
),
),
);
}
}
Output:
dark appbarAppBar yellow Background with Red Text
You can still style the AppBar and apply the wanted text and background color. We can give backgroundColor in the AppBar. And in the style property of the text, we can change the text color.
Code
Dart
import 'package:flutter/material.dart';
void main() => runApp(SimpleAppBarLightRun());
class SimpleAppBarLightRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.dark(),
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.yellow,
title: Text('App Bar',style: TextStyle(color: Colors.red),),
),
),
);
}
}
Output:
Yellow appbar with red titleGradient AppBar Background
You can still style the AppBar by using the gradient widget. Following the code below.
Code
Dart
import 'package:flutter/material.dart';
void main() => runApp(GradientAppBarRun());
// stateless widget
class GradientAppBarRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
// returning MaterialApp
return MaterialApp (
debugShowCheckedModeBanner: false,
theme: ThemeData.light (),
home:
// scaffold
Scaffold (
body:
CustomScrollView (
slivers: <Widget>[
// sliverappbar for gradient widget
SliverAppBar (
pinned: true,
expandedHeight: 50,
flexibleSpace: Container (
decoration: BoxDecoration (
// LinearGradient
gradient: LinearGradient (
// colors for gradient
colors: [
Colors.deepPurpleAccent,
Colors.yellowAccent,
],
),
),
),
// title of appbar
title: Text ("Gradient AppBar!"),
),
SliverList (
delegate: SliverChildListDelegate ([
// Body Element
],
),
),
],
),
),
);
}
}
Output:
Gradient appbarAppBar Grey Background centered Indigo Text with left icon
You can Add a left icon to the AppBar using the leading property of the AppBar.
Dart
import 'package:flutter/material.dart';
void main() => runApp(AppBarLeftIconRun());
// stateless widget
class AppBarLeftIconRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
// MaterialApp
return MaterialApp(
debugShowCheckedModeBanner: false,
// scaffold
home: Scaffold(
// appbar with center text true
appBar: AppBar(
centerTitle: true,
// leading icon
leading: new Icon(Icons.ac_unit),
// text in the center of the text
title: Text(
'LeftIcon' ,
textDirection : TextDirection.ltr,
style: TextStyle(
// text color
color: Colors.indigo,
),
),
// background of the appbar
backgroundColor: Colors.grey,
),
),
);
}
}
Output:
Left IconAppBar with Left and Right side icon
You can also add the icon on the right side of the AppBar, using the actions property of the AppBar.
Dart
import 'package:flutter/material.dart';
void main() => runApp(AppBarLeftIconRun());
// stateless widget
class AppBarLeftIconRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
// MaterialApp
return MaterialApp(
debugShowCheckedModeBanner: false,
// scaffold
home: Scaffold(
// appbar with center text true
appBar: AppBar(
centerTitle: true,
leading: IconButton(
onpressed:(){},
// leading icon
icon:Icon(Icons.account),
),
actions:[
// actions property for right side icons
IconButton(
onpressed:(){},
icon:Icon(Icons.account),
],
// text in the center of the text.
title: Text(
'<--Icon-->' ,
textDirection : TextDirection.ltr,
style: TextStyle(
// text color
color: Colors.indigo,
),
),
// background of the appbar
backgroundColor: Colors.grey,
),
),
);
}
}
Output:
Left and Right IconAppBar with Double icons on Sides
You can add multiple icons in the AppBar. In leading we are using row for multiple icons, but actions can take multiple children.
Dart
import 'package:flutter/material.dart';
void main() => runApp(AppBarDoubleSideIconsRun());
// stateless widget
class AppBarDoubleSideIconsRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.light(),
// scaffold
home: Scaffold(
// appbar
appBar:AppBar(
leading: Padding(
padding: EdgeInsets.only(left: 2),
// row is using for multiple icons
child: Row(
children: <Widget>[
IconButton(
onPressed:(){},
icon: Icon(Icons.account_circle),
),
Expanded(
child: IconButton(
onPressed:(){},
icon:
Icon(Icons.account_circle),
),
),
],
),
),
title: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Text('<--Icons-->'),
],
),
// actions widget
actions: <Widget>[
IconButton(
onPressed:(){},
icon: Icon(Icons.account_circle),
),
IconButton(
onPressed:(){},
icon: Icon(Icons.account_circle),
),
],
),
),
);
}
}
Output:
Double icon sidesAppBar Preferred Size
By using the Preferred Size widget we can give the size of the AppBar.
Dart
import 'package:flutter/material.dart';
void main() => runApp(AppBarSize());
// stateless widget
class AppBarSize extends StatelessWidget {
@override
Widget build(BuildContext context) {
// MaterialApp
return MaterialApp(
debugShowCheckedModeBanner: false,
// scaffold
home: Scaffold(
// preferredSize widget
appBar: PreferredSize(
preferredSize:Size.fromHeight(150.0),
child:AppBar(
flexibleSpace:Center(
child:Text('AppBar With Height 150'),
),
),
)
),
);
}
}
Output:
Preferred Size appbar
Similar Reads
Flutter - AppBar Widget
AppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a Flutter application are a widget or a combination of widgets. So AppBar is also a built-in class or widget in Flutter which give
7 min read
Flutter - Gradient Button
Buttons are the building block of any Android Application, Buttons are helping in to perform specific tasks like Navigating from one screen to another screen, Showing the Toast, Sign-in, Sign-up buttons, and many more. But giving the effects of the colors to the Button makes the Button more pretty.
3 min read
Hidden Appbar in Flutter
Hidden Appbar is the Appbar, when we are scrolling the main body of the Application, the Appbar also scrolled and goes to hidden. There is no need for extra packages of adding, we simply going to use NestedScrollView Widget for the same. A sample video is given below to get an idea about what we are
3 min read
Gradient in Flutter Applications
Gradients are considered to be eye-catching elements in UI/UX and graphic design. Having gradient elements in your apps can really elate your app in terms of user experience and feel.In this tutorial, we will be looking at how we can implement gradients in flutter.Flutter offers 3 types of gradients
7 min read
Flutter - Hidden Bottom AppBar
Bottom AppBar or Bottom Navigation Bar is mostly used in every Android IOS Application, Bottom Navigation Bar is an AppBar containing Tabs which is used to show more pages on a single screen. We are going to Hide the bottom App Bar on scroll down and show it in scroll up. Â What will we do?We will s
3 min read
Flutter - Scratch Card View App
Scratch Card is one of the popular things that you can get to see on various shopping apps and payment apps. These Scratch Cards are used to offer rewards and cashback to users. It can have a wide range of use cases but it is primarily used to generate random rewards for the users of the application
5 min read
Flutter - Elevation in AppBar
In Flutter, you can set the elevation of the AppBar using the elevation property. The elevation controls the shadow effect displayed below the AppBar. Here's an example code snippet to set the elevation of the AppBar: AppBar( title: Text('Elevation'), elevation: 20, ), In the above code snippet, the
3 min read
Flutter - Tab Bar
In this article, we see the Tab bar in Flutter. Tab Bar is mostly used in applications. So we will see how we can create the tab bar in flutter just because nowadays companies demand the flutter app the most. Tab Bar generally handle with the controller and in Flutter, there are many controllers lik
4 min read
Flutter - Banner Widget
Banner widget comes built-in with flutter API. It is somewhat similar to the debug banner that we are used to seeing on the top-right corner on a flutter app in debug mode. It enables us to show a message or text on top of any other widget. Below we will see its implementation with the help of an ex
3 min read
Flutter - Card Widget
Card is a built-in widget in Flutter which derives its design from Google's Material Design Library. The functionality of this widget on screen is, that it is a bland space or panel with round corners and a slight elevation on the lower side. It comes with many properties like color, shape, shadow c
4 min read