How to remove padding from some children in a Column?

user_12483095 0
Viewed 752
Padding(
  padding: const EdgeInsets.all(20.0),
  child: Column(
    children: [
      // ... some widgets
      Padding(
        padding: const EdgeInsets.all(-20.0), // Error: How to do something like this?
        child: FooWidget()
      ), 
      // ... more widgets
      BarWidget(), // Remove padding from here also
      // ... and some more widgets
    ],
  ),
)

I'm providing a padding of 20 to my Column, but I want to remove this padding from some of its children, like FooWidget, BarWidget, etc. How can I do that?

Note: I'm not looking for workarounds like provide the padding to other widgets instead of the root Column or wrap those widgets in another Column and provide that column a padding, etc.

flutter-layout flutter
4 Answers

This working solution uses UnconstrainedBox that only takes away the left side and right side of padding. You might do the calculation of overflowWidth first when screenWidth is not feasible to use.

In addition, this comes up with a RenderConstraintsTransformBox overflowed exception that will be gone away in app release version, e.g. flutter build appbundle for android app.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: UnboundedWidget(),
    );
  }
}

class UnboundedWidget extends StatelessWidget {
  const UnboundedWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final double overflowWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Unbounded demo'),
      ),
      body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: [
              UnconstrainedBox(
                child: Container(
                  color: Colors.red,
                  width: overflowWidth,
                  child: const Text('123'),
                ),
              ),
            ],
          )),
    );
  }
}
user_181311460

There is no such thing as negative margins in flutter. You can try workarounds with transforms on x, y, z axis as transform property on Container widget.

Or try with SizedBox which ignores parent padding.

Here is a similar example that should work:

child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                children: [
                  Container(
                      width: double.infinity, height: 20, color: Colors.green),
                  
                  // This child ignores parent padding.
                  SizedBox(
                    width: MediaQuery.of(context).size.width,
                    height: 20,
                    child: Expanded(
                      child: OverflowBox(
                          maxWidth: MediaQuery.of(context).size.width,
                          child: Container(
                              width: double.infinity,
                              height: 20,
                              color: Colors.red)),
                    ),
                  ),
                  Container(
                      width: double.infinity,
                      height: 20,
                      color: Colors.blue),
                  ],
              ),
            ),
user_57524730

you can apply transformation to the widgets that you want to remove the padding for, for example:

Container(
              transform: Matrix4.translationValues(-20.0, 0, 0.0), //here
              child: FooWidget()),
user_95857710

Use Stack widget with Positioned widget Positioned(left: -20, child: widget)

on the other hand, for padding less. you can create custom 2 widget name as:

  1. paddingLessWidget(child: your widget)

  2. paddingWithWidget(child: your widget)

then use this into column() widget.

  • Remove padding from column's parents. use as:
    Column( 
      children:[ 
        paddingLessWidget(child:  your widget),
        paddingWithWidget(child: your widget) 
      ] 
    ),
user_151274620
Related