47

How do I change Font size of a material button... is there a better way to do this?

new MaterialButton(
  height: 140.0,
  minWidth: double.infinity,
  color: Theme.of(context).primaryColor,
  textColor: Colors.white,
  child: new Text("material button"),
  onPressed: () => {},
  splashColor: Colors.redAccent,
),
2
  • Unclear. Do you want to avoir the usage of MaterialButton ? Commented Jun 24, 2018 at 20:45
  • I'm experimenting with buttons and just looking for new ideas. Commented Jun 24, 2018 at 21:28

5 Answers 5

75

The widget architecture in Flutter makes this very simple: The child of the MaterialButton is a Text widget, which can be styled with its style property:

new MaterialButton(
  height: 140.0,
  minWidth: double.infinity,
  color: Theme.of(context).primaryColor,
  textColor: Colors.white,
  child: new Text(
    "material button",
    style: new TextStyle(
      fontSize: 20.0,
      color: Colors.yellow,
    ),
  ),
  onPressed: () => {},
  splashColor: Colors.redAccent,
);
Sign up to request clarification or add additional context in comments.

2 Comments

What did you add to my solution?
@creativecreatorormaybenot I guess it's more convenient for the OP to copy their own code with the necessary modification than using an isolated example :/
21

You can make use of the style attribute of your Text widget.

MaterialButton(
  ...
  child: Text(
    'material button',
    style: TextStyle(
      fontSize: 20.0, // insert your font size here
    ),
  ),
)

Comments

3

There are 2 ways to define Font size

1) Inline set random font size like a newie to Flutter

Text('item ${++index}', style: TextStyle(
                        color: Colors.green,
                        fontSize: 32)

2) Use Predefined Typography Font Sizes from Apps Material Theme

This is a much better approach. This way you can define font sizes in one place and it will apply automatically in your entire Application.

Text('item ${++index}', style: TextStyle(
                        color: Colors.green,
                        fontSize: Theme
                            .of(context)
                            .textTheme
                            .headline1?.fontSize?? 32
                      )

Define Global Theme class :

 import 'package:flutter/material.dart';

// Global Theme For App
class AppTheme {
  ThemeData buildThemeData() {
    return ThemeData(
        // Global Color Style
        primarySwatch: Colors.blueGrey,
        primaryColor: Colors.blueGrey[800],
        accentColor: Colors.tealAccent,

        // Global Text Style
        textTheme: TextTheme(
          headline1: TextStyle(
            fontSize: 72.0,
            fontWeight: FontWeight.bold,
            fontFamily: 'Cutive',
          ),
          headline6: TextStyle(fontSize: 36.0),
          bodyText2: TextStyle(fontSize: 14.0),
        ));
  }
}

Now Apply it in Entry point of App:

import 'package:flutter/material.dart';
import 'theme.dart';
import './widgets/home.dart';
void main() {
  runApp(MainApp());
}
// This widget is the root of your application.
class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: AppTheme().buildThemeData(),
      home: MyStatelessWidget(), 
    );
  }
}

The third Approach I use is I define components I gonna use anyways for header, label, etc and reuse them

import 'dart:ui' as ui;

import 'package:flutter/material.dart';

class Header extends StatelessWidget {
  Header({
    required this.title,
  });

  final String title;

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: TextStyle(
          fontSize: 32,
          foreground: Paint()
            ..shader = ui.Gradient.linear(
              const Offset(0, 10),
              const Offset(40, 20),
              <Color>[
                Colors.red,
                Colors.blue,
              ],
            )),
    );
  }
}

This way setting header in all widget reduce to 1 line:

        Header(title: "Hello World"),

Comments

1

Using ThemeData, you can globally set the text attributes for buttons:

const ColorScheme _scheme = ColorScheme.light();
const Color _primaryColor = TranscarentColors.primary;

final ThemeData theme = ThemeData(
  primaryColor: _primaryColor,
  textTheme: const TextTheme(
    button: TextStyle(
      color: Colors.white,
    ),
  ),
  buttonTheme: const ButtonThemeData(
    height: 140.0,
    minWidth: double.infinity,
    colorScheme: _scheme,
    splashColor: Colors.redAccent,
    buttonColor: _primaryColor,
    textTheme: ButtonTextTheme.primary,
  ),
);

...which can be passed as a parameter to MaterialApp()

Comments

0
Link(
                    uri: Uri.parse(
                        'https://google.com/'),
                    target: LinkTarget.blank,
                    builder: (ctx, openLink) {
                      return TextButton.icon(
                        onPressed: openLink,
                        label: const Text('Google'),
                        icon: const Text(''),
                      );
                    },
                  ),

**Blockquote**

2 Comments

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.