Question 187724 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How do I add a padding in the Scaffold without using SafeArea?

How do I add a responsive padding at the top of my scaffold area,
Here is the preview of my Scaffold Area. I want the background there to be transparent or will adjust depending on the users phone theme. However mine is overlapping.
Here is the sample code of my login_page.

login_page.dart

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextWidget(
              descriptionText: "Sign In!",
              selectedFontColor: ColourPalette.primaryColor,
              selectedFontWeight: FontWeight.normal,
              selectedFontSize: 25),
          SignInButton(
            Buttons.google,
            text: "Sign up with Google",
            onPressed: () {
              AuthServices().signInWithGoogle();
            },
          )
        ],
      ),
    );
  }
}
Tags:

3

Answers


  1. 0

    Instead of wrapping the Scaffold with Safearea, wrap the widget inside the body with Safearea it gives you the same result but the UI will respond according to the theme.

    class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child:Column(
        children: [
          TextWidget(
              descriptionText: "Sign In!",
              selectedFontColor: ColourPalette.primaryColor,
              selectedFontWeight: FontWeight.normal,
              selectedFontSize: 25),
          SignInButton(
            Buttons.google,
            text: "Sign up with Google",
            onPressed: () {
              AuthServices().signInWithGoogle();
            },
          )
        ],
      ),
    ),);
  }
}
    Login or Signup to reply.
  2. 0

    If you don’t want to use SafeArea and still get the mobile theme color at the top of the screen

    you can put a SizedBox in the starting of the column with a height of the top padding

    like this:

    class _LoginPageState extends State<LoginPage> {


 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
        height: MediaQuery.of(context).padding.top,
      ),
          TextWidget(
              descriptionText: "Sign In!",
              selectedFontColor: ColourPalette.primaryColor,
              selectedFontWeight: FontWeight.normal,
              selectedFontSize: 25),
          SignInButton(
            Buttons.google,
            text: "Sign up with Google",
            onPressed: () {
              AuthServices().signInWithGoogle();
            },
          )
        ],
      ),
    );
  }
}
    Login or Signup to reply.
  3. 0

    If you want to give color to safe area, you can do it like this:

    class _LoginPageState extends State<LoginPage> {
  const TestScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: SafeArea(
        child: Scaffold(
          body: Column(
            children: [
              SizedBox(
                height: MediaQuery.of(context).padding.top,
              ),
              TextWidget(
                  descriptionText: "Sign In!",
                  selectedFontColor: ColourPalette.primaryColor,
                  selectedFontWeight: FontWeight.normal,
                  selectedFontSize: 25),
              SignInButton(
                Buttons.google,
                text: "Sign up with Google",
                onPressed: () {
                  AuthServices().signInWithGoogle();
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search