Home > Net >  Position a Container in the middle of screen in Flutter?
Position a Container in the middle of screen in Flutter?

Time:06-05

I am using flutter. I made a reusable Container widget and used it in the column widget. I want to center the container in the middle of the screen. The Container currently is showing at the top of the screen. The code is attached below. I am glad if someone helps. ..

Widget mainOptionsWidget(
  BuildContext context,
  String title,
  IconData icon,
  String cardId,
) {
  return Container(
    constraints: BoxConstraints(
      minWidth: MediaQuery.of(context).size.width * 1,
      minHeight: MediaQuery.of(context).size.height * 0.20,
      maxHeight: MediaQuery.of(context).size.height * 1,
    ),
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.only(
        bottomRight: Radius.circular(60),
        topLeft: Radius.circular(60),
      ),
    ),
    // margin: const EdgeInsets.only(left: 20, right: 20),
    child: SingleChildScrollView(
      child: Column(
        children: [
          Icon(
            icon,
            color: Colors.white,
            size: 60,
          ),
          const SizedBox(
            height: 20,
          ),
          Text(
            title,
            style: const TextStyle(
              fontSize: 24,
              color: Colors.white,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    ),
  );
}

And used

return Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: [
        mainOptionsWidget(
          context,
          "I WANT",
          Icons.cached_outlined,
          "1",
        )
      ],
    ),
  ),
);

CodePudding user response:

Use Center widget on body.

body: Center(
  child: SingleChildScrollView(
    child: Column(
      children: [
        mainOptionsWidget(
          context,
          "I WANT",
          Icons.cached_outlined,
          "1",
        )
      ],
    ),
  ),
),
  • Related