Change Button Text Font Size Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 08-10-2020

Most of the buttons uses Text widget for displaying text in the button. You can change the font size of text in Text widget using style property. As a result, font size of Button text can be changed.

Change Button Text Font Size Using Flutter Android App

Change Button FOnt Size

Step 1: Change Button FOnt Size Short COde Example

Column(children: <Widget>[
  RaisedButton(
    color: Colors.lightBlue,
    onPressed: () {},
    child: Text('Button - Default Text Size',),
  ),
  RaisedButton(
    color: Colors.deepOrange,
    onPressed: () {},
    child: Text('Button - Font Size',
      style: TextStyle(fontSize: 15),
    ),
  ),
  RaisedButton(
    color: Colors.cyan,
    onPressed: () {},
    child: Text('Button - Font Size',
      style: TextStyle(fontSize: 30),
    ),
  )
]
)


Complete Code For Change Button FOnt Size In FLutter
Main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              centerTitle: true,
                backgroundColor: Colors.pink,
                title: Text('Change Button Font Size')
            ),
            body: Center(
                child: CustomButton()
            )
        )
    );
  }
}

class CustomButton extends StatefulWidget {
  CustomButtonState createState() => CustomButtonState();
}

class CustomButtonState extends State<CustomButton> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(
          padding: const EdgeInsets.only(top:20.0),
          child: Center(
              child: Column(children: <Widget>[
                RaisedButton(
                  color: Colors.lightBlue,
                  onPressed: () {},
                  child: Text('Button - Default Text Size',),
                ),
                RaisedButton(
                  color: Colors.deepOrange,
                  onPressed: () {},
                  child: Text('Button - Font Size',
                    style: TextStyle(fontSize: 15),
                  ),
                ),
                RaisedButton(
                  color: Colors.cyan,
                  onPressed: () {},
                  child: Text('Button - Font Size',
                    style: TextStyle(fontSize: 30),
                  ),
                )
              ]
              )
          ),
        ),
    );
  }
}



 

Related Post