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

Flutter – adding a gradient background with three colors to the Scaffold widget

My result –

enter image description here

What I expected –

enter image description here

I don’t have an idea how to fix this, there is my code

I did –

  • Set the background color of Scaffold to transparent

  • use the Container widget and add LinearGradient

    Scaffold(
    backgroundColor: Colors.transparent,
    body: Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Color.fromRGBO(31, 16, 80, 1),
            Color.fromRGBO(13, 4, 42, 1),
            Color.fromRGBO(42, 28, 81, 1),
          ],
          stops: [
            0.1,
            0.4,
            0.9,
          ],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
      child: SingleChildScrollView(
        child: Column(
          children: [
            // Your content widgets go here
          ],
        ),
      ),
    ),
  );
Tags:

2

Answers


  1. 0 
    return Scaffold(
        backgroundColor: Color.fromRGBO(13, 4, 42, 1),
        body: Stack(
          children: [
           
            Positioned(
                top: -(MediaQuery.of(context).size.width * 0.75),
                left: 0,
                right: 0,
                child: Transform.scale(
                    scale: 1.5,
                  child: Container(
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(boxShadow: [
                      BoxShadow(
                          color: Color.fromRGBO(31, 16, 80, 1),
                          blurRadius: 50,
                          spreadRadius: 3)
                    ], shape: BoxShape.circle),
                  ),
                )),
            Positioned(
              bottom: -(MediaQuery.of(context).size.width * 0.95),
              left: 0,
              right: 0,
              child: Transform.scale(
                scale: 1.5,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.width,
                  decoration: BoxDecoration(boxShadow: [
                    BoxShadow(
                        color: Color.fromRGBO(42, 28, 81, 1),
                        blurRadius: 50,
                        spreadRadius: 3)
                  ], shape: BoxShape.circle),
                ),
              ),
            ),
             Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: SingleChildScrollView(
               child: Column()
              )
            ),
          ],
        ));
    Login or Signup to reply.
  2. 0

    Try this code

    Scaffold(
  backgroundColor: Colors.transparent,
  body: Container(
   height: MediaQuery.of(context).size.height,
   width: MediaQuery.of(context).size.width,
    decoration: const BoxDecoration(
     gradient: LinearGradient(
       colors: [
         Color.fromRGBO(68, 20, 208, 1.0),
         Color.fromRGBO(13, 4, 42, 1),
         Color.fromRGBO(68, 20, 208, 1.0),
       ],
   
       begin: Alignment.topCenter,
       end: Alignment.bottomCenter,
     ),
   ),
   child: SingleChildScrollView(
     child: Column(
       children: [
         // Your content widgets go here
       ],
     ),
    ),
  ),
);

    Output

    enter image description here

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

Back To Top
Search