CODEWITHSUNDEEP
flutter-layout
Matt
Matt

Reputation: 235

Curved containers in Flutter

I was wondering what the best way is to achieve the curved effect of the contianers in the image. As a relative newcomer to Flutter I'm not sure what the best approach to be. I did think that one way would be to add a curved background image but I don't think this is the best way.

Flutter Curved Screen

Upvotes: 1

Views: 2521

Answers (4)

user17330495
user17330495

Reputation:

Use this way:

Container(
         height: MediaQuery.of(context).size.height / 7,
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          stops: [0.1, 0.5],
                          colors: [
                            Colors.blueAccent.withOpacity(0.7),
                            Colors.blueAccent.withOpacity(0.3),
                          ],
                        ),
                        borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(100.0)),
                  ),)

Upvotes: 2

candour
candour

Reputation: 1

It'll be best to use a stack.

-Then have the different containers styled with rounded left bottom corners.

-These containers will have a stack as a child, reason being that you'll be having icons and text (the earth icon and xd text)

-Each container should have a column and a position.fill widget (having a container as a child for the the earth icon and xd text...)

-You could also make use of if/else for the selected tab color ("You" "Trending"...)

-Some shadow for the floating action button should style things up.

Hope this helped

Upvotes: 0

Marcel Dz
Marcel Dz

Reputation: 2714

Another maybe more easy way is, if your'e using Stack like @Nuts said, but creating Containers with rounded edges on the bottom left side instead of creating custom shapes, and work with positioning to overlap/fill it to the next element.

So all you have to understand for this then is actually stacking elements and giving them rounded edges.

Try to start doing it in one of the described ways and if you got stuck, you can provide the code then so we can help you easier.

Greetings

Upvotes: 1

Adelina
Adelina

Reputation: 11871

Start from https://blog.usejournal.com/how-to-draw-custom-shapes-in-flutter-aa197bda94bf Might also need to you stack, to fit all of those shapes together

Upvotes: 0

Related Questions