Radio Button Text Alignment to left in Flutter-CodePudding

I want to create a Radio Button using Flutter in VS Code. I've done the radio button with functionality but the requirement of my project is to align the radio button text to the left side. But I can't to do that. Here I attached my sample source code.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: '',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // The inital group value
  String _selectedGender = 'male';
  String text = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          '',
        ),
      ),
      body: Padding(
          padding: const EdgeInsets.all(25),
          child: Container(
            margin: const EdgeInsets.all(4),
            padding: const EdgeInsets.all(4),
            decoration: BoxDecoration(
                color: const Color(0xffffffff),
                border: Border.all(color: const Color(0xffbcbcbc))),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ListTile(
                  leading: Radio(
                    fillColor: MaterialStateColor.resolveWith(
                        (states) => Color(0xfff29257)),
                    value: 'Male',
                    groupValue: _selectedGender,
                    onChanged: (value) {
                      setState(() {
                        _selectedGender = value!.toString();
                      });
                    },
                  ),
                  title: const Text('Male'),
                  textColor: Colors.grey,
                  focusColor: MaterialStateColor.resolveWith(
                      (states) => Color(0xfff29257)),
                ),
                ListTile(
                  leading: Radio(
                    fillColor: MaterialStateColor.resolveWith(
                        (states) => Color(0xfff29257)),
                    value: 'female',
                    groupValue: _selectedGender,
                    onChanged: (value) {
                      setState(() {
                        _selectedGender = value!.toString();
                      });
                    },
                  ),
                  title: const Text('Female'),
                  textColor: Colors.grey,
                  //fillColor: MaterialStateColor.resolveWith((states) => Colors.green),
                  focusColor: MaterialStateColor.resolveWith(
                      (states) => Color(0xfff29257)),
                ),
                
              ],
            ),
          )),
    );
  }
}

Is there a way to customize those radio buttons?

CodePudding user response：

A simpler approach would be to use the RadioListTile widget and set controlAffinity = ListTileControlAffinity.trailing. This will move the text to the left and the radio button to the right:

           RadioListTile(
              value: true,
              groupValue: groupVal,
              onChanged: (val) {},
              controlAffinity: ListTileControlAffinity.trailing,
            )