Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Material Design

Different Ways to apply Gradient Colors In Flutter + App Bar

June 27, 2020
in Material Design
10 min read
Different Ways to apply Gradient Colors In Flutter + App Bar

You want to make that application look amazingly cool with flutter gradient, with more beautiful UI/UX, Here’s a full tutorial and different ways on how you can implement the color gradient in your flutter application.

RELATED FLUTTER RESOURCES

A Contextual Action/App Bar Implementation for Flutter

A Flutter App for Tracking Funds/Money – Budget Tracker

How To Add a Backdrop in Flutter (Material Design)

This article will simply teach you how to add and customize these gradient designs into your Flutter app. Most popular organizations now use a gradient as part of their mobile app design, web application, websites, and many others. Here are some examples below;

ADVERTISEMENT
flutter gradient

Isn’t this beautiful? Yes, It is

Linear Gradients

As per its name, this gradient flows over a simple linear stretch. Over this stretch is a smooth color transition. An example follows:

As you can see, the color changes in a linear manner from left to right. Linear gradients can be modified so that this color transition occurs in a different direction. The following example demonstrates a linear gradient that is aligned from the bottomLeft to the topRight:

Here’s how to code a linear gradient in Flutter:

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [Colors.purple, Colors.blue])
  ),
)

If you do not specify the “begin” or the “end” property in the constructor, the default will be from centerLeft to centerRight, like the first example in this section.

  • Flutter Package to Share on Social Media

Here’s the full code for a sample app with a simple linear gradient:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
              child: Container(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          colors: [Colors.purple, Colors.blue])))),
    ));
  }
}

There are multiple ways to customize your gradient. Let’s start by adding two more colors and changing the direction of the gradient:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
              child: Container(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          begin: Alignment.bottomLeft,
                          end: Alignment.topRight,
                          colors: [Colors.red, Colors.yellow, Colors.blue, Colors.purple])))),
        ));
  }
}

The linear gradient above follows a uniform distribution; by adding stops into our code, we can adjust the distribution of each color in the gradient. Each value in the array of stop values controls how prevalent each color is in the gradient. Here’s the code for the same linear gradient with some stop values:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
              child: Container(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          begin: Alignment.bottomLeft,
                          end: Alignment.topRight,
                          // Add one stop for each color 
                          // Values should increase from 0.0 to 1.0
                          stops: [0.1, 0.5, 0.8, 0.9],
                          colors: [Colors.red, Colors.yellow, Colors.blue, Colors.purple])))),
        ));
  }
}

The corresponding linear gradient:

Radial Gradients

These types of gradients change color based on a pixel’s location from a central point, hence the name “radial”.

An example of a radial gradient

Here’s how to code a basic radial gradient in Flutter:

Container(
  decoration: BoxDecoration(
      gradient: RadialGradient(
        colors: [Colors.yellow, Colors.deepPurple],
    ),
  ),
),

Here’s the full code for a sample app with a simple radial gradient:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
              child: Container(
                decoration: BoxDecoration(
                  gradient: RadialGradient(
                    colors: [Colors.yellow, Colors.deepPurple],
                  ),
                ),
              ),
          ),
        ));
  }
}

Similar to linear gradients, radial gradients can also be customized by a multitude of methods:

Colors and Stops

As we have done with linear gradients, we can add multiple colors or add stops to our radial gradients. In this case, stops specify decimal values of the radius between 0.0 and 1.0, giving concentric rings for each color. If stops are not specified, a uniform distribution is assumed. Here’s an example of a multicolored radial gradient with stops:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                 colors: [Colors.yellow, Colors.red, Colors.purple],
                 // Add one stop for each color 
                 // Values should increase from 0.0 to 1.0
                 stops: [0.1, 0.5, 0.75]
                ),
              ),
            ),
          ),
        ));
  }
}

Center

In the examples above, the center point of the radial gradient was in the middle of the screen. If you want to modify the center of the gradient, you must specify the center property in the Radial Gradient constructor. Remember, if you don’t define this property, the default places the gradient in the center of the screen

center: Alignment(0.x, 0.y)

Here’s a helpful image explaining the alignment in Flutter:

Credit: Suragch (Medium and StackOverflow)

Here’s an example of a radial gradient with an adjusted center:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                 colors: [Colors.yellow, Colors.red, Colors.purple],
                 center: Alignment(1.0, 1.0),
                ),
              ),
            ),
          ),
        ));
  }
}

If you look at the graph, aligning the center of the radial gradient means that it should be shifted to the bottom right corner.

We can also adjust the focal point of the gradient within the radius by defining another property in the RadialGradient constructor:

focal: Alignment(0.x, 0.y),

Here’s the full code for a sample app with a radial gradient that has an adjusted focal point:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                  colors: [Colors.yellow, Colors.red,Colors.purple],
                  center: Alignment(0.6, -0.3),
                  focal: Alignment(0.3, -0.1),
                ),
              ),
            ),
          ),
        ));
  }
}

To adjust the radius of the focal point in the middle of the radial gradient, we need to define the focalRadius property in the RadialGradient constructor:

decoration: BoxDecoration(
      gradient: RadialGradient(
        colors: [Colors.yellow, Colors.red,Colors.purple],
        ...
        focalRadius: 1.0,
   ),
 ),

Here’s the code for the previous radial gradient with an adjusted focal radius:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                  colors: [Colors.yellow, Colors.red,Colors.purple],
                  center: Alignment(0.6, -0.3),
                  focal: Alignment(0.3, -0.1),
                  focalRadius: 1.0,
                ),
              ),
            ),
          ),
        ));
  }
}

Sweep Gradients:

This is a type of gradient that “sweeps” around a focal point forming a color gradient. Here’s an example:

Here’s the code for the sweep gradient above:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                gradient: SweepGradient(
                  colors: [Colors.yellow,Colors.green, Colors.blue],
                ),
              ),
            ),
          ),
        ));
  }
}

As you can see, we’ve already added multiple colors in the sweep gradient. Just like the examples we’ve seen, we can also customize this gradient by adding stops:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                gradient: SweepGradient(
                  colors: [Colors.yellow, Colors.green,Colors.blue],
                  stops: [0.1, 0.6, 0.9],
                ),
              ),
            ),
          ),
        ));
  }
}

We can customize sweep gradients in a way that we haven’t seen in other gradients — by defining the start and stop angles that define its boundaries.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                gradient: SweepGradient(
                  colors: [Colors.yellow, Colors.green,Colors.blue],
                  stops: [0.1, 0.6, 0.9],
                  startAngle: 0.9,
                  endAngle: 1.2,
                ),
              ),
            ),
          ),
        ));
  }
}

You can always adjust the angles and experiment to create the design you want.

Bonus

All the gradients and customization we discussed can also be applied to the AppBar using the flexibleSpace property of the AppBar’s constructor. Here’s an example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Gradient App Bar'),
            flexibleSpace: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.red, Colors.orange],
                ),
              ),
            ),
          )
        ));
  }
}

This trick isn’t limited to just linear gradients; You can also add and customize radial and sweep gradients as you wish. However, linear gradients tend to be the most suitable when customizing the app bar.

RelatedFlutter Resource

A Contextual Action/App Bar Implementation for Flutter
App Bar

A Contextual Action/App Bar Implementation for Flutter

August 19, 2020
A Flutter App for Tracking Funds/Money – Budget Tracker
Finance App

A Flutter App for Tracking Funds/Money – Budget Tracker

August 17, 2020
backdrops flutter
Material Design

How To Add a Backdrop in Flutter (Material Design)

August 6, 2020
custom fonts text style flutter
Flutter Widgets

Flutter Custom Fonts and How to Style Text

July 24, 2020
HOW TO USE THE FLUTTER TEXTFIELD
Flutter Widgets

How to use the Flutter Text Field and Input Widget

July 13, 2020
FLUTTER-FUTUER-APP-DEVELOPMENT
Dart

Why Google Flutter Is the Future of Mobile App Development

July 12, 2020
Next Post
flutter_auth_buttons

Social Media Sign-In Buttons in Flutter (Facebook, Twitter, Google, etc)

cross axis alignment and main axis alignment

Difference between the Flutter CrossAxisAlignment and MainAxisAlignment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

A Flutter App To Track The Chemistry Chemical Elements

A Flutter App To Track The Chemistry Chemical Elements

August 1, 2020
Flutter Yutube Downloading App

A Cool YouTube Media Downloader App made with Flutter

August 16, 2020
A Flutter package to get Instagram user details and download reels videos

A Flutter package to get Instagram user details and download reels videos

August 8, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In