Center text in Floating button when using a non default size for the text

Viewed 99
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class MainScreen extends StatefulWidget {
  @override
  _State createState() => _State();
}

enum Sex { Male, Female }

class _State extends State<MainScreen> {
  Sex _sex = Sex.Male;
  double _height = 180;
  int _weight = 74;
  int _age = 25;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: new Text("BMI CALCULATOR")),
      body: SafeArea(
        child: Container(
            padding: EdgeInsets.all(24),
            child: Row(
                children: [
            Expanded(
            child: Card(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "WEIGHT",
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.grey),
                  ),
                  Text(
                    _weight.toString(),
                    style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      FloatingActionButton(
                        child: Text("-", style: TextStyle(fontSize: 50),),
                        onPressed: () => {},
                      ),
                      FloatingActionButton(
                        child: Text("+", style: TextStyle(fontSize: 50),),
                        onPressed: () => {},
                      )
                    ],
                  )
                ])))])

        ),
      ),
    );
  }
}

enter image description here

How can I center the '-' and '+' text signs? I have tried with centered widget and align widget without any luck.

3 Answers

You should replace your texts with icons

FloatingActionButton(
                    child: Icon(Icons.add),
                    onPressed: () => {},
                  )

if it's not centered you can wrap your Icon with Center widget

Try this Code, I have made some changes with some details,and It worked for me.

class MainScreen extends StatefulWidget {
  @override
  _State createState() => _State();
}

enum Sex { Male, Female }

class _State extends State<MainScreen> {
  Sex _sex = Sex.Male;
  double _height = 180;
  int _weight = 74;
  int _age = 25;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: new Text("BMI CALCULATOR")),
      body: SafeArea(
        child: Container(
            padding: EdgeInsets.all(24),
            child: Row(children: [
              Expanded(
                  child: Card(
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        //Minus Sybmol button
                        FloatingActionButton(
                          child: Text(
                            "-",
                            style: TextStyle(fontSize: 50),
                          ),
                          onPressed: () => {},
                        ),

                        // As our text widget Weight is in the center of the - and +,
                        //So it should be added in the row between the - and + symbols button.
                        new Column(
                          children: [
                            Text(
                              "WEIGHT",
                              style: TextStyle(
                                  fontSize: 20,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.grey),
                            ),
                            Text(
                              _weight.toString(),
                              style: TextStyle(
                                  fontSize: 60, fontWeight: FontWeight.bold),
                            ),
                          ],
                        ),

                        //Plus Symbol button
                        FloatingActionButton(
                          child: Text(
                            "+",
                            style: TextStyle(fontSize: 50),
                          ),
                          onPressed: () => {},
                        )
                      ],
                    )
                  ])))
            ])),
      ),
    );
  }
}

ADDED IMAGE OUTPUT (To show that it works on dartpad too):

enter image description here

EDITED:- (To Center the widget in floating action button) You Can Use a image or icon at the place of the text in the floating action button.

 FloatingActionButton(
                          child:new Icon(Icons.remove,size:55),
                          onPressed: () => {},
                        ),
SafeArea(
    child: Container(
        padding: EdgeInsets.all(24),
        child: Row(children: [
          Expanded(
              child: Card(
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                Text(
                  "WEIGHT",
                  style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.grey),
                ),
                Text(
                  _weight.toString(),
                  style:
                      TextStyle(fontSize: 60, fontWeight: FontWeight.bold),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    FloatingActionButton(
                      child: Icon(
                        Icons.remove,
                        size: 50,
                      ),
                      onPressed: () => {},
                    ),
                    FloatingActionButton(
                      child: Icon(
                        Icons.add,
                        size: 50,
                      ),
                      onPressed: () => {},
                    )
                  ],
                )
              ])))
        ])),
  )

Try this

Related