Flutter BoxDecoration taking up the whole screen-CodePudding

I am trying to place containers with a BoxDecoration. However, when I apply the BoxDecoration to my container to shape the container, it causes the container to take up the whole screen and not just the text that is in the container.

Is there any way I can get the BoxDecoration to only be as big as the text that the container is holding?

class WelcomePage extends StatefulWidget {
  static String id = 'login_screen';
  const WelcomePage({Key? key}) : super(key: key);

  @override
  _WelcomePageState createState() => _WelcomePageState();
}

class _WelcomePageState extends State<WelcomePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: const Text('My App'),
        ),
        body: Container(
          margin: EdgeInsets.all(20),
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: Colors.black54, width: 3),
            borderRadius: BorderRadius.circular(50),
          ),
          padding: EdgeInsets.all(30),
          child: Column(
            children: const [
              Text(
                'LOGO',
                style: TextStyle(fontSize: 100),
              ),
              SizedBox(
                height: 20,
              ),
              Text(
                'Header',
                style: TextStyle(fontSize: 35),
              ),
              SizedBox(
                height: 15,
              ),
              Text(
                  'Strapline Ipsum Lorem ipsum lorem ipsum lorem ipsum lorem lorem ipsum lorem ipsum',
                  style: TextStyle(fontSize: 15, color: Colors.black54))
            ],
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

Column by default tries to be as big as possible

add mainAxisSize: MainAxisSize.min to Column:

Column(
  mainAxisSize: MainAxisSize.min,
  children: [...],
)

CodePudding user response：

Your Container takes the whole height without your BoxDecoration anyway. If you omit your BoxDecoration and put a color in your Container you will see it doesn't change. If you want the Container to fit your widgets inside it you can use FittedBox. Just wrap it around your Container and set fit to BoxFit.cover.

FittedBox(
          fit: BoxFit.cover,
          child: Container(
            margin: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: Colors.black54, width: 3),
              borderRadius: BorderRadius.circular(50),
            ),
            padding: EdgeInsets.all(30),
            child: Column(
              children: const [
                Text(
                  'LOGO',
                  style: TextStyle(fontSize: 100),
                ),
                SizedBox(
                  height: 20,
                ),
                Text(
                  'Header',
                  style: TextStyle(fontSize: 35),
                ),
                SizedBox(
                  height: 15,
                ),
                Text(
                    'Strapline Ipsum Lorem ipsum lorem ipsum lorem ipsum lorem lorem ipsum lorem ipsum',
                    style: TextStyle(fontSize: 15, color: Colors.black54))
              ],
            ),
          ),
        ),