How to remove padding from some children in a Column?

Question

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.

Answer 1

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()),

Answer 2

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'),
                ),
              ),
            ],
          )),
    );
  }
}

Answer 3

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) 
      ] 
    ),