15.3 C
New York
Wednesday, October 5, 2022

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:

Advertisements

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

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles