Home > Back-end >  Apply color until certain height to a Container | Flutter
Apply color until certain height to a Container | Flutter

Time:05-12

I've a container which has height: 600. Now I want to apply it a background color but only until height 200. Is this possible in Flutter ? My limitation is that I cannot use multiple containers or any other widget to achieve this. I can only make changes in this existing widget.

Container (
  height: 600,
  color: Colors.blue //Only apply until height 200
)

CodePudding user response:

You can use enter image description here

CodePudding user response:

I think LinearGradient is the only option but you should apply small trick to get rid of smooth transition, below code snippet would work for you

  Container(
    height: 600,
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        stops: [200 / 600, 200 / 600, 1],
        colors: [Colors.blue, Colors.transparent, Colors.transparent],
      ),
    ),
  )
  • Related