How to create multiline SnackBar in Flutter?

How to create multiline SnackBar in Flutter? Is there any easy way to show action button below the content?

The Material specs allows to use SnackBars with button below the content:

enter image description here


Solution 1:

Flexible can do the trick some times.

Flexible(child: Text('This is very long message with very big sentence.'))

Solution 2:

this can easily be done using the Flusbar package, here is a full example

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  void _showFlushbar(BuildContext context) {
    Flushbar(
      titleText: Text(
        'This item already has the label "travel". you can add a new label.',
        style: TextStyle(color: Colors.white),
      ),
      messageText: Align(
        alignment: Alignment.bottomRight,
        child: InkWell(
          onTap: () => print('message pressed'),
          child: Text(
            'ADD A NEW LABEL ',
            style: TextStyle(color: Colors.purple),
          ),
        ),
      ),
      isDismissible: false,
      duration: Duration(seconds: 5), // to make it disappear after 5 seconds
    )..show(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text('show snackbar'),
          onPressed: () => _showFlushbar(context),
        ),
      ),
    );
  }
}

enter image description here