I am trying to use RadioListTile in my code, but nothing is getting rendered on the webpage. As soon as I use Radio the radio button does get rendered but I want to use RadioListTile. Following is the code:

import "package:flutter/material.dart";
import 'package:flutter_practice/pages/utils/routes.dart';

class LoginPage extends StatefulWidget {
  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  int selectedValue = 0;
  // String name = "";

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: SingleChildScrollView(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              child: Text(
                "Bank accounts",
                style: TextStyle(color: Colors.black, fontSize: 25),
              ),
            ),
            RadioListTile(
              groupValue: selectedValue,
              value: 1,
              title: Text("Select bank account"),
              onChanged: (value) => setState(() => selectedValue = 1),
            ),
            VerticalDivider(
              thickness: 5,
              color: Colors.black,
            ),
            Container(
              child: Text(
                "Your cards",
                style: TextStyle(color: Colors.black, fontSize: 25),
              ),
            )
          ],
        ),
      ),
    );
  }
}

what am I doing wrong?

CodePudding user response：

All children of Row wrap in Expanded

CodePudding user response：

RadioListTile like the other ListTiles, is aimed to take the full width and with a Row, that will be infinite.

The solution is going 3 ways:

1. Using Radio instead like you did.

2. Wrapping the RadioListTile with a Flexible

Flexible(
  child: RadioListTile(
    groupValue: selectedValue,
    value: 1,
    title: Text("Select bank account"),
    onChanged: (value) => setState(() => selectedValue = 1),
  ),
),

3. Also wrapping the RadioListTile's width with a SizedBox would solve the problem as well.

SizedBox(
  width: 40
  child: RadioListTile(
    groupValue: selectedValue,
    value: 1,
    title: Text("Select bank account"),
    onChanged: (value) => setState(() => selectedValue = 1),
  ),
),