Padding on the only right side is not applied

Question

I am developing a mobile app in flutter.

As you can see in the screenshot, in the purple Container section at the bottom, even though I specified EdgeInsets.all(8.0) in the Padding, the Padding on the right side is not applied. How can I resolve this issue?

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

class MyMobileBody extends StatefulWidget {
  const MyMobileBody({Key? key}) : super(key: key);

  @override
  State<MyMobileBody> createState() => _MyMobileBodyState();
}

class _MyMobileBodyState extends State<MyMobileBody> {
  var position = const Offset(0, 0);

  @override
  Widget build(BuildContext context) {
    final List<String> entries =
    List<String>.generate(200, (index) => "Item ($index)");
    const double velosity = 600;

    return Stack(children: [
      ListView.builder(
          padding: const EdgeInsets.all(8),
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              height: 50,
              color: Colors.amber[100],
              child: Center(child: Text('${entries[index]}')),
            );
          }),
      GestureDetector(
        dragStartBehavior: DragStartBehavior.down,
        onVerticalDragEnd: (details) {
          print('onVerticalDragEnd:' + details.toString());
          if (details.primaryVelocity! > velosity) {
            print('swiped!');
          }
        },
        child: Stack(
          //alignment: Alignment.bottomCenter,
          children: [
            Positioned(
                left: 0,
                bottom: 0,
                child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      color: Colors.purple[100],
                      height: 315,
                      width: MediaQuery.of(context).size.width, //double.infinity,
                      child: const Center(
                          child: Text('Text')
                      ),
                    )
                )
            ),
          ],
        ),
      )
    ]);
  }
}

Answer 1

Try to edit your code like this:

Positioned(
    left: 0,
    right: 0,
    bottom: 0,
    child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
            color: Colors.purple[100],
            height: 315,
            // width: MediaQuery.of(context).size.width,
            child: const Center(
                child: Text('Text')
            ),
        )
    )
),

Setting both left and right to 0 and removing width from Container should do the trick.