Question 76226 in Flutter Question posted in
The official Flutter documentation can be found here.

flutter : how RadioListTile Button will be in center?

This is my code I want to center my radioListTile Button.

import 'package:flutter/material.dart';

import '../Utils/GlobalColor/global_color.dart';
import '../Utils/GlobalTextStyles/global_text_styles.dart';
import '../Utils/GlobalWidgetPages/app_bar_center_text.dart';

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

  @override
  State<SavedAddressesPage> createState() => _SavedAddressesPageState();
}

class _SavedAddressesPageState extends State<SavedAddressesPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: MyColor.bgLightColor,
      appBar: AppBarWithCenterText(
        text: "Saved Addresses",
        onPressed: () {
          Navigator.pop(context);
        },
      ),
      body: Center(
        child: RadioListTile(
          dense: true,
          contentPadding: EdgeInsets.only(left: 13, right: 13, top: 0, bottom: 16),
          title: Container(
            padding: EdgeInsets.only(left: 13, right: 13, top: 16, bottom: 16),
            height: 100,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: MyColor.greyColor),
            ),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        Image.asset(
                          "assets/outline_location_pin.png",
                          height: 18,
                          width: 17,
                          color: MyColor.blueColor,
                        ),
                        SizedBox(
                          width: 4,
                        ),
                        Text(
                          'Office',
                          style: textStyleWith14500(MyColor.blackColor),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ],
                    ),
                    Row(
                      children: [
                        InkWell(onTap: (){
                          print("edit");
                        },
                          child: Container(
                              height: 18,
                              width: 18,
                              child: Icon(
                                Icons.edit,
                                size: 16,
                                color: MyColor.blueColor,
                              )),
                        ),
                        SizedBox(
                          width: 14,
                        ),
                        InkWell(onTap: (){
                          print("delete_outline");
                        },
                          child:
                        Container(
                            height: 18,
                            width: 18,
                            child: Icon(
                              Icons.delete_outline,
                              size: 16,
                              color: MyColor.primaryRedColor,
                            )),)
                      ],
                    ),
                  ],
                ),
                SizedBox(
                  height: 9,
                ),
                Text(
                  "D-787 High Tower Appt., Flat No. 202, In White House Lane, Street View, USA.",
                  style: textStyleWith12400(MyColor.darkGreyColor),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
          ),
          value: "male",
          groupValue: 0,
          onChanged: (value) {
            setState(() {
              print(value.toString());
            });
          },
        ),
      ),
    );
  }
}

This is my UI

enter image description here

But In Actuall I want like this

enter image description here

Tags:

2

Answers


  1. 0

    This would work, but using RadioListTile wouldn’t make much sense in this case. The radio can be added to the leader using the regular ListTile.

    child: RadioListTile(
  controlAffinity: ListTileControlAffinity.trailing,
  secondary: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Radio(value: 1, groupValue: 0, onChanged: (value) {}),
    ],
  ),
  // ...
),

    child: ListTile(
  leading: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Radio(value: 1, groupValue: 0, onChanged: (value) {}),
    ],
  ),
  // ...
),
    Login or Signup to reply.
  2. 0

    You can wrap RadioListTile under container widget and make align center like below code example :

    Container(
    alignment: Alignment.center, // Align the RadioListTile button to center
    child: RadioListTile(
      dense: true,
      contentPadding: EdgeInsets.only(left: 13, right: 13, top: 0, bottom: 16),
      title: Container(
        padding: EdgeInsets.only(left: 13, right: 13, top: 16, bottom: 16),
        height: 100,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          border: Border.all(color: MyColor.greyColor),
        ),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Image.asset(
                      "assets/outline_location_pin.png",
                      height: 18,
                      width: 17,
                      color: MyColor.blueColor,
                    ),
                    SizedBox(
                      width: 4,
                    ),
                    Text(
                      'Office',
                      style: textStyleWith14500(MyColor.blackColor),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
                Row(
                  children: [
                    InkWell(onTap: (){
                      print("edit");
                    },
                      child: Container(
                          height: 18,
                          width: 18,
                          child: Icon(
                            Icons.edit,
                            size: 16,
                            color: MyColor.blueColor,
                          )),
                    ),
                    SizedBox(
                      width: 14,
                    ),
                    InkWell(onTap: (){
                      print("delete_outline");
                    },
                      child:
                    Container(
                        height: 18,
                        width: 18,
                        child: Icon(
                          Icons.delete_outline,
                          size: 16,
                          color: MyColor.primaryRedColor,
                        )),)
                  ],
                ),
              ],
            ),
            SizedBox(
              height: 9,
            ),
            Text(
              "D-787 High Tower Appt., Flat No. 202, In White House Lane, Street View, USA.",
              style: textStyleWith12400(MyColor.darkGreyColor),
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ],
        ),
      ),
      value: "male",
      groupValue: 0,
      onChanged: (value) {
        setState(() {
          print(value.toString());
        });
      },
    ),
  ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search