display widget in a center of column-CodePudding

In my page I have a customized Appbar then I want to display a message with icon, and it should be in the center of the page. i mean the customized Appbar is on the top then in the center of the page we have the icon with the message

child: Scaffold(
      body: SafeArea(
          child: SingleChildScrollView(
        child: Column(children: [
          const CustomAppBar("Réglages et paramétrages", true, false,
              returnToHistory: true),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment : MainAxisAlignment.center,
                children: const [
                  Icon(Icons.warning, color: Color(0xFFFF9500), size: 100 ,),
                ],
              ),
              Row(
                children: const [
                  Text(
                      "be careful",
                      textAlign: TextAlign.center,)

                ],
              )
            ],
          ),
        ]),
      )),
    ));

CodePudding user response：

Remove SingleChildScrollView and wrap the inner column with an expanded widget.

CodePudding user response：

You can create custom appbar as widget and provide on Scaffold's appbar. To do this, you need to implements PreferredSizeWidget

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  const CustomAppBar({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(title),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

And your layout will be

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CustomAppBar(title: "Réglages et paramétrages"),
      body: SafeArea(
        child: Center(
          child: SingleChildScrollView(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const [
                      Icon(Icons.warning, color: Color(0xFFFF9500)),
                      Text(
                        "be careful ",
                        textAlign: TextAlign.center,
                      )
                    ],
                  ),
                ]),
          ),
        ),
      ),
    );
  }

You can find more about