I want to remove the following blue padding from MaterialBanner widget, but it doesn't seem to be customizable. I want to insert an image in the red region.

I looked into MaterialBanner for using across Scaffold widgets because ScaffoldMessenger doesn't allow me to insert widgets other than MaterialBanner.

Is there any suggestion?

dartpad.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Scaffold(body: JustBanner())));
}

class JustBanner extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _JustBannerState();
  }
}

class _JustBannerState extends State<JustBanner> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
            onPressed: () {
              final messenger = ScaffoldMessenger.of(context);
              messenger.clearMaterialBanners();
              messenger.showMaterialBanner(MaterialBanner(
                  padding: EdgeInsets.zero,
                  leadingPadding: EdgeInsets.zero,
                  leading: const SizedBox.shrink(),
                  backgroundColor: Colors.blue,
                  content: Container(
                    color: Colors.red,
                    width: 200,
                    height: 50,
                  ),
                  actions: const [SizedBox.shrink()]));
            },
            child: const Text('Banner')),
      ],
    );
  }
}

CodePudding user response：

Container(
              width: MediaQuery.of(context).size.width,
              child: MaterialBanner(
                content: Text('Hello'),
                actions: [
                  Icon(Icons.add),
                ],
              ),
            ),

CodePudding user response：

Its no possible without copy and re-create the class, buttonBar always appear:

final Widget buttonBar = Container( // <-- problematic widget
      alignment: AlignmentDirectional.centerEnd,
      constraints: const BoxConstraints(minHeight: 52.0),
      padding: const EdgeInsets.symmetric(horizontal: 8),
      child: OverflowBar(
        overflowAlignment: widget.overflowAlignment,
        spacing: 8,
        children: widget.actions,
      ),
    );

    final double elevation = widget.elevation ?? bannerTheme.elevation ?? 0.0;
    final Color backgroundColor = widget.backgroundColor
        ?? bannerTheme.backgroundColor
        ?? theme.colorScheme.surface;
    final TextStyle? textStyle = widget.contentTextStyle
        ?? bannerTheme.contentTextStyle
        ?? theme.textTheme.bodyText2;

    Widget materialBanner = Container(
      margin: EdgeInsets.only(bottom: elevation > 0 ? 10.0 : 0.0),
      child: Material(
        elevation: elevation,
        color: backgroundColor,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Padding(
              padding: padding,
              child: Row(
                children: <Widget>[
                  if (widget.leading != null)
                    Padding(
                      padding: leadingPadding,
                      child: widget.leading,
                    ),
                  Expanded(
                    child: DefaultTextStyle(
                      style: textStyle!,
                      child: widget.content,
                    ),
                  ),
                  if (isSingleRow)
                    buttonBar, // <----- here
                ],
              ),
            ),
            if (!isSingleRow)
              buttonBar, // <----- here

            if (elevation == 0)
              const Divider(height: 0),
          ],
        ),
      ),
    );