Underlines of TextFormFields in form not uniform no matter what I do. How to keep a uniform thickness for all underlines of TextFormFields?

Issue

I’m brand new to flutter and building a form in Flutter containing multiple TextFormFields, and a radio button. But, something weird is happening where the textformfields above the radio buttons are not uniform and keep changing randomly based on other changes I make. In my screenshot 1, you can see the first 3 text fields are uniform, but the one after the radio button is lighter. This is the closest I’ve come to achieving uniform text field underlines. I’ve tried adding and removing a lot of things such as padding, sized boxes, containers, etc, and they affect the underlines in different ways.

For instance, changing the mainAxisAlignment under Form->Column->Padding to ‘start’ instead of spaceEvenly causes the 1st 3 underlines to have thickness in increasing order and the last text box is fine Check screenshot 2. How can I make it so that all the underlines of the TextFormFields are equally thick and uniform irrespective of any other changes I make? Is there any better way of doing radio buttons than what I have done? Is there a better element in flutter than radio buttons for what I have done? I would also love it if I could make the radio buttons horizontal instead of vertical. The underlines are working fine and not fading in chrome, but they are in android emulator (Pixel 5 API30). I want this to work regardless of platform.

main.dart:

    import 'package:flutter/material.dart';
    import 'package:hospital_finance_app/pages/OPD.dart';
    import 'package:hospital_finance_app/pages/login_page.dart';
    import 'package:hospital_finance_app/utils/routes.dart';
    import 'package:google_fonts/google_fonts.dart';
    
    void main() {
      runApp(const hospApp());
    }
    
    class hospApp extends StatelessWidget {
      const hospApp({Key? key}) : super(key: key);
    
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Login Demo',
          home: OPD(),
        );
      }
    }

OPD.dart:

    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    import 'package:hospital_finance_app/utils/routes.dart';
    
    enum paymentMethod { Cash, Other }
    
    class OPD extends StatefulWidget {
      @override
      State<OPD> createState() => _OPDState();
    }
    
    class _OPDState extends State<OPD> {
      paymentMethod? _method = paymentMethod.Cash;
    
      @override
      Widget build(BuildContext context) {
            return Material(
              child: Scaffold(
                appBar: AppBar(backgroundColor: Colors.black),
                body: Form(
                  child:Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                          TextField(
                          decoration: InputDecoration(
                            labelText: "Name",
                            hintText: "Name",
                          ),
                        ),
                        TextFormField(
                          decoration: InputDecoration(
                            hintText: "Mobile number", 
                            labelText: "Mobile Number"),
                          keyboardType: TextInputType.number,
                          inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly],
                          
                        ),
                        TextFormField(
                          
                          decoration: InputDecoration(
                            labelText: "Amount",
                            hintText: "Amount"),
                          keyboardType: TextInputType.number,
                          inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly],
                          
                        ),
                        Container(
                          child: Text("Mode of Payment", style: TextStyle(fontSize: 16, color: Colors.black54, fontFamily: "OpenSans", fontWeight: FontWeight.w400 ), textAlign: TextAlign.left),alignment: Alignment.centerLeft,),
                        Column(
                      children: <Widget>[
                        ListTile(
                          title: const Text('Cash'),
                          leading: Radio<paymentMethod>(
                            value: paymentMethod.Cash,
                            groupValue: _method,
                            onChanged: (paymentMethod? value) {
                              setState(() {
                                _method = value;
                              });
                            },
                          ),
                        ),
                        ListTile(
                          title: const Text('Other'),
                          leading: Radio<paymentMethod>(
                            value: paymentMethod.Other,
                            groupValue: _method,
                            onChanged: (paymentMethod? value) {
                              setState(() {
                                _method = value;
                              });
                            },
                          ),
                        ),
                      ],
                    ),
                         
                    TextFormField(
                      decoration: InputDecoration(labelText: "Comments/Notes",hintText: "Comments/Notes"),
                    ),
                    ElevatedButton(
                      onPressed:(){ Navigator.pushNamed(context, MyRoutes.opdRoute); },
                              child: Text("Submit"),
                              style: TextButton.styleFrom(minimumSize: Size(100,30)),)
                    ]
                ),
                  )
                      ),
              ));
      }
    }

Screen shot of my application on android emulator with mainAxisAlignment spaceEvenly

Screen shot of my application on android emulator with mainAxisAlignment start.

Solution

this is a bug from the android emulator. try running your app on a real device.

Answered By – reza

Answer Checked By – Cary Denson (FlutterFixes Admin)