Flutter Question posted in
The official Flutter documentation can be found here.

How to design a Flutter screen with gradient background

enter image description here

I’m currently working on a Flutter project and I’m trying to design a screen with a gradient background. I’m relatively new to Flutter and I’m having trouble implementing the gradient background. I’ve tried a few approaches, but none seem to be working as expected.

Here’s what I’m trying to achieve: I want the screen to have a gradient background that smoothly transitions from one color to another. Additionally, I need to overlay some widgets on top of this gradient background.

Could someone please provide me with guidance or sample code on how to achieve this?

Tags:

2

Answers


  1. 0

    enter image description hereHow about an Container with child and foreground decoration starting from the bottom? Please change the CupertinoColor or CupertinoIcons to Color or Icons if you use Material instead of Cupertino theme.

              Container(
            foregroundDecoration: const BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  CupertinoColors.black,
                  Color(0x00000000), // transparent color
                ],
                begin: Alignment.bottomCenter,
                end: Alignment.topCenter,
                stops: [0, 1],
              ),
            ),
            child: Image.network(
              loadingBuilder: (BuildContext context, Widget child,
                  ImageChunkEvent? loadingProgress) {
                if (loadingProgress == null) return child;
                return const Center(
                  child: Text("Loading ..."),
                );
              },
              "https://www.ephotozine.com/articles/71-amazing-examples-of-landscape-photography--26838/images/xlg_lrg_185834_1400173414.jpg",
              errorBuilder: (BuildContext context, Object exception,
                  StackTrace? stackTrace) {
                    return const Icon(
                        CupertinoIcons.nosign,
                        size: 30,
                       color: CupertinoColors.systemGrey,
                    );
              },),
          ),
    Login or Signup to reply.
  2. 0 
    Stack(
        children: [
          Container(
            height: MediaQuery.of(context).size.height,
            foregroundDecoration: const BoxDecoration(
              gradient: LinearGradient(stops: [
                0,
                0.3,
              ], colors: [
                Colors.transparent,
                Colors.black,
              ], begin: Alignment.topCenter, end: Alignment.bottomCenter),
            ),
            child: Image.network(
                fit: BoxFit.fitHeight,
                'https://images.unsplash.com/photo-1632299768491-51d27b80d088?q=80&w=2591&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'),
          ),
          Container(
            padding: EdgeInsets.all(10),
            margin:
                EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.3),
            child: Text(
              'Lets You In',
              style: TextStyle(color: Colors.white),
            ),
          )
        ],
      )

    Try using this code for the below outputenter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search