What is this and how can I build this in flutter? I don't know how to create it and I can't design these buttons.

This is the design which I want to create

enter image description here


Solution 1: YaDev

I'm guessing you do not know how to create those buttons, this is a scuffed code but it should give you an idea of how to create it.

            Container(
              width: 220.0,
              height: 65.0,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [Colors.white, Color.fromARGB(255, 177, 177, 177)]),
                borderRadius: BorderRadius.circular(35),
              ),

              alignment: Alignment.center, // where to position the child
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
                child: Container(
                  width: 200.0,
                  height: 50.0,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(25),
                      color: Color.fromARGB(255, 226, 219, 219)),
                  child: Row(
                    children: [
                      Expanded(
                          flex: 2,
                          child: Container(
                            margin: EdgeInsets.symmetric(
                                vertical: 7, horizontal: 10),
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(15),
                                color: Color.fromARGB(255, 78, 151, 185)),
                          )),
                      Expanded(
                        flex: 5,
                        child: Container(
                          padding: EdgeInsets.symmetric(vertical: 7),
                          alignment: Alignment.centerLeft,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Expanded(child: Text("title")),
                              Expanded(child: Text("subtitle"))
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),

should result in something like this Like this

adjust colors/dimensions/radius and text accordingly. You can turn it into a button with a gestureDetector Wrap it with a statefulWidget and assign a pressed parameter to it to control how it behaves when clicked and what to change. Please be mindful of the dimensions when creating it, use media sized query to not over flow