Flutter: Container with Gradient Background

A few examples of implementing Containers with gradient backgrounds in Flutter.

Example 1: LinearGradient

The code: Advertisements

Scaffold(
      appBar: AppBar(
        title: const Text('KindaCode.com'),
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [Colors.purple[200]!, Colors.amber],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight),
        ),
      ),
);

Screenshot:

Example 2: RadialGradient

The code:

 Scaffold(
      body: Container(
        decoration: const BoxDecoration(
            gradient: RadialGradient(
                center: Alignment.center, colors: [Colors.yellow, Colors.red])),
      ),
);

Screenshot:

Example 3: SweepGradient

AdvertisementsThe code:

 Scaffold(
        body: Container(
      decoration: const BoxDecoration(
          gradient: SweepGradient(
              center: Alignment.center, colors: [Colors.green, Colors.yellow])),
 ));

Screenshot:

Wrap Up

We’ve gone through a couple of examples of creating gradient background Containers in Flutter with the BoxDecoration class and the gradient property. If you’d like to explore more new and exciting things in Flutter and Dart, take a look at the following articles:

• Flutter: Create a Password Strength Checker from Scratch
• Flutter: How to Draw a Heart with CustomPaint
• Implementing Tooltips in Flutter
• Flutter: Drawing an N-Pointed Star with CustomClipper
• Flutter Gradient Text Examples
• Using Static Methods in Dart and Flutter

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.