CODEWITHSUNDEEP
flutterdart
drrkmcfrrk
drrkmcfrrk

Reputation: 368

Show custom widget with ScaffoldMessenger

I’d like to have a widget in my application that operates much in the same way as a MaterialBanner with ScaffoldMessenger. But I’d like to customize the appearance of banner.

Is there a way that I can customize the appearance of MaterialBanner? In my initial experimentation I thought of extending it, but in the end I found that wasn’t really going to work. Also for a brief second I thought thought type casting a custom widget in my call to showMaterialBanner might work, but quickly ruled that out.

There's a few things I'm struggling to figure out how to address through the MaterialBanner widget, if it's still possible:

Upvotes: 2

Views: 712

Answers (4)

Kevin Mali
Kevin Mali

Reputation: 1

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text(
        'successfully purchase ${widget.level['village name']}-${widget.level['village level'][index]['Level']}'),
    backgroundColor: Colors.green,
  ),
)

Complete the process by providing your purchased product name and your favorite color.

Upvotes: 0

Nathan Agersea
Nathan Agersea

Reputation: 536

I wanted to do something similar for standardization / reuse. Creating a custom widget seemed more trouble than it was worth so I used a function instead.

MaterialBanner materialBannerException(BuildContext ctx, String msg) {
  return MaterialBanner(
    actions: [
      IconButton(
        onPressed: () {
          ScaffoldMessenger.of(ctx).hideCurrentMaterialBanner();
        },
        icon: Icon(
          Icons.close,
          color: Theme.of(ctx).colorScheme.onErrorContainer,
        ),
      ),
    ],
    backgroundColor: Theme.of(ctx).colorScheme.errorContainer,
    content: Text(
      msg,
      style: TextStyle(color: Theme.of(ctx).colorScheme.onErrorContainer),       
    ),
    leading: Icon(
      Icons.error,
      color: Theme.of(ctx).colorScheme.onErrorContainer,
    ),
  );
}

Upvotes: 1

Dan Harms
Dan Harms

Reputation: 4840

Edit: Here is an example showing what I believe you are looking for.

A MaterialBanner is already customizable. Place your desired widget in the content param or actions list.

ScaffoldMessenger.of(context).showMaterialBanner(
  MaterialBanner(
    content: const Text('This is a MaterialBanner'), // <- This can be whatever you want
    actions: <Widget>[
      TextButton(
        onPressed: () => ScaffoldMessenger.of(context).hideCurrentMaterialBanner(),
        child: const Text('DISMISS'), 
      ), // <- So can these
    ],
  ),
);

Upvotes: 2

DJafari
DJafari

Reputation: 13535

you can change styles of MaterialBanner ( outer widget ) in your app theme :

MaterialApp(
  .
  .
  theme: ThemeData(
    .
    .
    .
    bannerTheme: MaterialBannerThemeData(
      backgroundColor: ,
      contentTextStyle: ,
      elevation: ,
      leadingPadding: ,
    ),
  ),
);

and if you want change structure of inner widget you can pass any widget to content :

MaterialBanner(
  content: Row(
    children: const[
      Icon(Icons.check),
      Expanded(
        child: Text('This is a MaterialBanner'),
      ),
    ],
  ),
  actions: [
    TextButton(
      onPressed: () => ScaffoldMessenger.of(context).hideCurrentMaterialBanner(),
      child: const Text('DISMISS'),
    ),
  ],
);

Upvotes: 1

Related Questions