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

Flutter – How to exclude a widget from layout padding(symmetric horizontal)?

enter image description here

Let’s say all screens need same size horizontal padding like the picture above so I made a base layout widget that every screen takes it.

class BaseLayout extends StatelessWidget {
  final Widget child;

  const BaseLayout({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15),
          child: SafeArea(child: child)),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return BaseLayout(
      child: Column(
        children: [                    
          Container( // how to make only this one take whole width of the screen unlike others?            
            decoration: const BoxDecoration(color: Color(0xffFFFF7E)),
          ),
          // the below Rows need to take the padding and it does due to the BaseLayout
          Row(),
          Row()
        ],
      ),
    );
  }
}

However, a widget like the yellow box has to take whole width size of the screen(no padding needed).

Is it possible? or I should not use the layout and give it to needed ones.

Thanks in advance.

Tags:

2

Answers


  1. 0

    You can try to use a negative margin.

     Container(
        margin: const EdgeInsets.symmetric(horizontal: 15),
        color: Colors.blue,
        child: Text('This text will not have padding'),
      ),
    Login or Signup to reply.
  2. 0

    No, it’s an exception here.

    That page doesn’t share the common visual characteristics like padding with other pages.

    So, it should has a different design from other pages (Reusability can’t be applied here).

    But if it’s insistent need, it can be handled by just a flag variable.

    Look at the following widget :

    class MyWidget extends StatelessWidget {
  final Widget child;
  final bool hasYellow;

   MyWidget({super.key,required this.child, this.hasYellow = false});

  @override
  Widget build(BuildContext context) {

    return (hasYellow)?Scaffold(
      body: // Design that Exceptional page
      Column(
        children: [
          Container(
            width: double.infinity,
            height: 200, // what u want
            color: Colors.yellow,
          ),
          Padding(
           padding: EdgeInsets.all(25),
           child: child,
            )
        ],
      )
    ):Scaffold(//Design that reusable page
      body: Padding(
        padding: EdgeInsets.all(25),
        child: child, // all page is padded
      )
    );
  }
}

    And that’s how you call in each case:

    return MyWidget(child: Text('HI, Has Yellow'), hasYellow: true,);

return MyWidget(child: Text('HI,Has No Yellow'),);

    Hope it helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search