Flutter - I want the text inside these elevated buttons to fit within the button. I want font size to be the same across buttons, can overflow to the next line

UmerIqbal
January 23, 2024
152 views
1 vote
2 Answers

Here’s the code I’m using for this answer button:

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

class AnswerButton extends StatelessWidget {
  const AnswerButton(
      {super.key, required this.answerText, required this.onTap});

  final String answerText;
  final void Function() onTap;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(2.0),
      child: ElevatedButton(
        onPressed: onTap,
        style: ElevatedButton.styleFrom(
          fixedSize: const Size.fromHeight(20),
          backgroundColor: Colors.white,
          foregroundColor: Colors.black,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadiusDirectional.circular(12),
          ),
          padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
        ),
        child: Text(answerText, style: GoogleFonts.rubik(fontSize: 15)),
      ),
    );
  }
}

Tried several things like Limited Box or ellipsis which isn’t working either.

Tags: flutter

Answers

Use FittedBox for wrapping Text and you need container to determine the size of ElevatedButton because i tried without Container, FittedBox not working as expected. The code:

                ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    fixedSize: const Size.fromHeight(20),
                    backgroundColor: Colors.white,
                    foregroundColor: Colors.black,
                    shape: RoundedRectangleBorder(
                      borderRadius:
                          BorderRadiusDirectional.circular(12),
                    ),
                    padding: const EdgeInsets.symmetric(
                        vertical: 10, horizontal: 20),
                  ),
                  child: Container(
                    width: double.infinity,
                    height: double.infinity,
                    child: const FittedBox(
                      fit: BoxFit.fill,
                      child: Text("By combining widgets in a"),
                    ),
                  ),
                ),

the result:

- DhafinRayhan
- January 23, 2024 at 11:11 am
- 0 votes
0
Remove fixedSize from ElevatedButton.styleFrom.
```
style: ElevatedButton.styleFrom(
  fixedSize: const Size.fromHeight(20), // <- remove this line
  // ...
)
```
- The text now fits inside the button
- Font size is the same across buttons
- Longer text does overflow to the next line
Additionally, if you want all text to be centered add this to the Text widget:
```
Text(
  answerText,
  style: GoogleFonts.rubik(fontSize: 15),
  textAlign: TextAlign.center, // <- add this line
)
```
Login or Signup to reply.