flutter: set font of SnackbarAction label

Question

Is there a way to set the font of a SnackBarAction in flutter? It seems to use the default system font.

SnackBarAction(
                label: 'my text', // how to sent font?
                onPressed: () {},
              )

change your snack_bar.dart File inside // add this code =====> return FlatButton( onPressed: _haveTriggeredAction ? null : _handlePressed, child: Text(widget.label,style: TextStyle( fontFamily: "YOUR_FONT", ),), textColor: textColor, disabledTextColor: disabledTextColor, ); — Jay Gadariya, Nov 29 '19 at 10:20
@JayGadariya You must not change anything inside `snack_bar.dart`, as It is an internal class in flutter sdk and if your forcefully do those changes would reflect on your all projects, which I think would be a disaster. — Ravinder Kumar, Nov 29 '19 at 10:54

Saeid Doroudi · Answer 1 · 2022-05-04T08:57:38.413

4

you can define custom theme for snackbar globally in ThemeData:

runApp(MaterialApp(
    theme: ThemeData(
      snackBarTheme: SnackBarThemeData(contentTextStyle: TextStyle(fontFamily: "customfontName")
    ),
),

to change font of action button inside Snack bar you can define font for text of button itself:

SnackBar(
   content: Row(
      children: [
          Expanded(child: Text('Some Text')),
          TextButton(
            child: Text('Action', 
               style: TextStyle(fontFamily: 'Your Font')),
               ),
             ],
          ),     
        ),

edited May 04 '22 at 08:57

answered Apr 04 '22 at 12:40

Saeid Doroudi

935
1
9
25

This changes the snackbar content but doesn't seem to affect the "action" button. – mgalgs Apr 27 '22 at 18:14
@mgalgs Answer updated – Saeid Doroudi May 04 '22 at 08:57

Ravinder Kumar · Answer 2 · 2019-11-29T10:24:42.850

1

Declare a common snackBarTheme inside ThemeData which you might have inside your main.dart,

 runApp(MaterialApp(
    theme: ThemeData(
      snackBarTheme: SnackBarThemeData(contentTextStyle: TextStyle(fontFamily: "montserrat")),
    ),
...

Do not forget to restart app completely to test the solution.

edited Nov 29 '19 at 10:24

answered Nov 29 '19 at 10:13

Ravinder Kumar

7,407
3
28
54

change your snack_bar.dart File inside // add this code =====> return FlatButton( onPressed: _haveTriggeredAction ? null : _handlePressed, child: Text(widget.label,style: TextStyle( fontFamily: "YOUR_FONT", ),), textColor: textColor, disabledTextColor: disabledTextColor, ); – Jay Gadariya Nov 29 '19 at 10:17
snackbar content textstyle also change style of snackbaraction label style?? – Jay Gadariya Nov 29 '19 at 10:27
2

perhaps this answer would set the font on the snackbar but not snackbar action? perhaps you have to set the default font for flatbutton? do you know how to do that? – Robin Manoli Nov 29 '19 at 10:28
you have to do change in your snackbar default file which provided by flutter see my first comment – Jay Gadariya Nov 29 '19 at 10:29
@JayGadariya yes `contentTextStyle` is a property to change label style only! – Ravinder Kumar Nov 29 '19 at 10:55
@RobinManoli Due to a certain issue in sanckbar I prefer [flushbar 1.9.1](https://pub.dev/packages/flushbar). It is more customizable. – Ravinder Kumar Nov 29 '19 at 11:10
@RobinManoli Hi I face, the same issue. Can you please provide me with some information how to set default font for `flatButton` – Szuler Mar 16 '21 at 15:41

madlick71 · Answer 3 · 2021-08-26T07:02:31.977

You can customize the Snackbar's action font family by changing the button theme in the app's global theme. This is because the Snackbar's action is considered as a button. For example, set:

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
       button: TextStyle(fontFamily: 'Raleway'),
    ),
  ),
  home: const MyHomePage(title: appName),
);

The actions in Snackbars will be affected as desired if you follow the instructions on https://flutter.dev/docs/cookbook/design/fonts for implementing custom fonts.

flutter: set font of SnackbarAction label

3 Answers3

Linked