enter image description here

I'm designing to be responsive in Flutter. I want to process width auto, 100%, how do I do it? I have processed double.infinity.

Widget _bottomSubText(subtext) {
return Container(
  padding: const EdgeInsets.only(top: 15),
  width: 977,
  height: 70,
  decoration: BoxDecoration(
    color: const Color.fromARGB(255, 245, 245, 245),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 3,
        blurRadius: 7,
        offset: const Offset(0, 3),
      )
    ],
  ),
  child: Text(
    subtext,
    textAlign: TextAlign.center,
    style: const TextStyle(fontSize: 30),
  ),
);

}

CodePudding user response：

Use width: MediaQuery.of(context).size.width in your container.

Widget _bottomSubText(subtext) {
return Container(
  padding: const EdgeInsets.only(top: 15),
//Set this width, if you want to half of screen multiplied it by 0.5 and so on...
  width: MediaQuery.of(context).size.width,
  height: 70,
  decoration: BoxDecoration(
    color: const Color.fromARGB(255, 245, 245, 245),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 3,
        blurRadius: 7,
        offset: const Offset(0, 3),
      )
    ],
  ),
  child: Text(
    subtext,
    textAlign: TextAlign.center,
    style: const TextStyle(fontSize: 30),
  ),
);
}

CodePudding user response：

Wrap your Container by Widget call (Expanded)

https://api.flutter.dev/flutter/widgets/Expanded-class.html