Flutter RawMaterialButton constant relative size-CodePudding

How do I make it so that I can have raw material buttons be relative in size to my device.

I want to make the buttons in my home page be a constant width no matter how big the text is inside them, and that width should be relative to the screen size.

Container(
                margin: EdgeInsets.all(10),
                child: FittedBox(
                  child: RawMaterialButton(
                    width: 150px,
                    fillColor: const Color(0xFF411F97),
                    padding: const EdgeInsets.fromLTRB(50, 10, 50, 10),
                    shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20),)),
                    child: const Text("San Francisco Area", style: TextStyle(fontSize: 50, color: Colors.white,), textAlign: TextAlign.center,),
                    //Sends user to weather list view
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => WeatherList(title: "San Francisco Metro Area", cityNames: sfaNames,)),
                      );
                    },
                  ),
                ),
                //Box shadow is essentially made here for the botton
                decoration: BoxDecoration(
                  color: Colors.teal,
                  borderRadius: BorderRadius.circular(20),
                  boxShadow: const [
                    BoxShadow(
                      color: Colors.black26,
                      offset: Offset(10, 10), // Shadow position
                    ),
                  ],
                )
            ),

CodePudding user response：

MediaQuery.of(context).size.width - Gets the screen size width for any device.

Wrap the button in SizedBox with required params, for example half of screen on any device

SizedBox( width: MediaQuery.of(context).size.width / 2,

            child: FittedBox(
              child: RawMaterialButton(
                fillColor: const Color(0xFF411F97),
                padding: const EdgeInsets.fromLTRB(50, 10, 50, 10),
                shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(
                  Radius.circular(20),
                )),
                child: const Text(
                  "San Francisco Area",
                  style: TextStyle(
                    fontSize: 50,
                    color: Colors.white,
                  ),
                  textAlign: TextAlign.center,
                ),
                //Sends user to weather list view
                onPressed: () {},
              ),
            ),
            //Box shadow is essentially made here for the botton
           ));