CODEWITHSUNDEEP
buttonfluttertext-size
IrishGringo
IrishGringo

Reputation: 4054

how to change font size of flutter material button?

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,
),

Upvotes: 47

Views: 94535

Answers (5)

Rocky Sotto
Rocky Sotto

Reputation: 1

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**

Upvotes: 0

Hitesh Sahu
Hitesh Sahu

Reputation: 45090

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"),

Upvotes: 3

stevenspiel
stevenspiel

Reputation: 5999

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()

Upvotes: 1

boformer
boformer

Reputation: 30103

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,
);

Upvotes: 75

creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126744

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
    ),
  ),
)

Upvotes: 21

Related Questions