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

How to set a linear background color of a container from left to right, but only cover the half top of the container in Flutter?

I am trying to make a container that has LinearGradient as its background but with these constraints:

  • The linear gradient is from left to right
  • The linear gradient color only covers the half top of the container

As shown in the image below, what I want to build is this.

enter image description here

This is what I have tried:

...
Widget build(context) {
  return Container( // 1. Outer container (black border box in image)
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [//color1, //color2],
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
      ),
    ),
    child: Center(
      child: Container( // 2. Inner container (colored white in image)
        // some padding and decoration for border-radius
      ),
    )
  )
}
...

But what it does is the gradient color covering all of the outer container (what I want is only half the top of the outer container). Is it possible to do this? If yes, how to do it?

Tags:

2

Answers


  1. 0

    Positioned within a Stack to achieve the desired gradient effect

    Widget build(BuildContext context) {
  return Container(
    width: double.infinity, // adjust to your requirement
    height: double.infinity, // adjust to your requirement
    child: Stack(
      children: [
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          child: Container(
            height: 0.5 * MediaQuery.of(context).size.height, // adjust this for half height
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Color(0xFFE91E63), Color(0xFFFFFFFF)], 
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
              ),
            ),
          ),
        ),
        
        Center(
          child: Container(
            width: 300,  // adjust to your requirement
            height: 150, // adjust to your requirement
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(15),
            ),
            // ... padding, etc.
          ),
        ),
      ],
    ),
  );
}
    Login or Signup to reply.
  2. 0

    Try this

    enter image description here

    Container(
  width: 150,
  height: 100,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [
        Colors.pink.shade700,
        Colors.pink.shade300,
      ],
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
    ),
  ),
  child: DecoratedBox(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.grey),
      gradient: const LinearGradient(
        colors: [
          Colors.white,
          Colors.transparent,
        ],
        begin: Alignment(0, 0),
        end: Alignment(0, -0.01),
      ),
    ),
    child: Center(
      child: Container(
        height: 70,
        width: 100,
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(color: Colors.grey),
          borderRadius: const BorderRadius.all(
            Radius.circular(16),
          ),
        ),
      ),
    ),
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search