How To Easily Implement Flutter Container Gradient

In this post, we will be implementing a beautiful Flutter container gradient by using a practical Flutter example. We will be explaining the implementation of Flutter container gradient step by step so you can have a better idea of how to use it. So let’s get right into implementing Flutter container gradient.

What is Flutter Container Gradient?

Flutter container gradient defines the process of giving a gradient background color to the Flutter container widget. Let’s now practically give our Flutter container a gradient background color.

Implementing Flutter Container Gradient

For that, we first have to define a simple Flutter container widget with some height and width. See below code:

Container(
          height: 100,
           width: 200
                )

Now we have to use the decoration constructor of Flutter container widget and pass it box decoration class. After that, we have to use the gradient constructor of box decoration class. By using this constructor, we can easily give our container a gradient background color.

In our case, we will pass linear gradient to it and by using its colors constructor, we will pass two colors to it(two or more is accepted) as it takes a list of Colors. See below code:

 decoration: BoxDecoration(
             gradient:
                LinearGradient(colors: [Colors.blue, Colors.green])
                          )

You can see that we now have container with gradient background in our screen. This is how you can easily give your Flutter containers a gradient background color.

Flutter Container Gradient Alignment

You can also specify the alignment of these colors using the begin and end constructors of linear gradient class. See below code:

   begin: Alignment.topRight,
   end: Alignment.bottomRight

flutter container gradient background begin end

For demonstration, we have given the top right alignment to begin constructor and bottom right to the end constructor as seen in the above image.

Flutter Container Gradient Stops

 stops: [.2, 5]

Stops are used to specify the extent of each color of Flutter container gradient. Just make sure that the number of stops match the number of colors.

So this is how you can easily set and customize Flutter container gradient background color. Hope you love this post. Don’t hesitate to ask if you still have questions in mind regarding the customization of Flutter container gradient background color. I would love to answer them all.

Below is the complete Flutter source code of the above implemented Flutter container gradient color.

Flutter Container Gradient Background Color Implementation Source Code

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Center(
                    child: Container(
                  height: 100,
                  width: 200,
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          colors: [Colors.blue, Colors.green],
                          stops: [.2, 5],
                          begin: Alignment.topRight,
                          end: Alignment.bottomRight)),
                )))));
  }
}

Conclusion

In conclusion, hope you now have a practical in depth knowledge of how to implement and customize Flutter container gradient background color. I would be happy to have your feedback on this post. Thank you for reading.