Как заставить такой переключатель работать во флаттере

Я пытаюсь создать функцию выбора пола, содержащую 3 переключателя. Я написал этот код, но он не работает так, как я хочу.

Контейнер с переключателем

final _radio_colume_container = Container(
margin: const EdgeInsets.fromLTRB(50, 15, 50, 00),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
  Text(
    'Gender*',
  ),
  Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
      add_radio_button(0, 'Male'),
      add_radio_button(1, 'Female'),
      add_radio_button(2, 'Others'),
    ],
  ),
],
),
);

Метод add_radio_button

Row add_radio_button(int btnValue, String title) {
return Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[

  Radio(
    activeColor: Colors.green,
    value: btnValue,
    groupValue: -1,
    onChanged: _handleradiobutton,
  ),
  Text(title)
],
);
}

Я добиваюсь этого

введите описание изображения здесь

Я хочу этого добиться.

введите описание изображения здесь


flutter flutter-dependencies flutter-layout
person Shubham    schedule 12.02.2019    source источник
comment
Я не вижу разницы. Разве это заполнение на обоих изображениях отличается ??   -  person Chenna Reddy    schedule 12.02.2019
comment
ваша цель изменить цвет?   -  person Mazin Ibrahim    schedule 12.02.2019
comment
@ChennaReddy padding также не работает правильно, и пространство между переключателем и заголовком также больше, я хочу его уменьшить.   -  person Shubham    schedule 12.02.2019
comment
@MazinIbrahim Да, но я буду работать над этим позже, сначала мне нужно получить тот же макет.   -  person Shubham    schedule 12.02.2019
comment
Radio имеет - materialTapTargetSize: свойство - сделать это - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,   -  person anmol.majhail    schedule 12.02.2019

Ответы (3)


arrow_upward
1
arrow_downward

Вам следует взглянуть на RadioListTile, поскольку он предоставляет свойство dense, которое поможет уменьшить отступ между кнопкой и ее заголовком.

person Mazin Ibrahim    schedule 12.02.2019
comment
Да, конечно, сначала я попробую ваше решение, а затем, если оно сработает, я его приму. - person Shubham; 12.02.2019

arrow_upward
0
arrow_downward

После применения некоторого рефакторинга из ответа @Subham, представляющего обобщенную версию кода для нескольких целей.

import 'package:flutter/material.dart';

/// Requires a list of string ['Male','Female','Other'] only once.

class GenderField extends StatelessWidget {
 
 final List<String> genderList;

  GenderField(this.genderList);

  @override
  Widget build(BuildContext context) {
    String select;
    Map<int, String> mappedGender = genderList.asMap();

    return StatefulBuilder(
      builder: (_, StateSetter setState) => Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            'Gender : ',
            style: TextStyle(fontWeight: FontWeight.w400),
          ),
          ...mappedGender.entries.map(
            (MapEntry<int, String> mapEntry) => Row(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Radio(
                    activeColor: Theme.of(context).primaryColor,
                    groupValue: select,
                    value: genderList[mapEntry.key],
                    onChanged: (value) => setState(() => select = value),
                  ),
                  Text(mapEntry.value)
                ]),
          ),
        ],
      ),
    );
  }
}

В main.dart этот виджет можно назвать

// Some code 
  Padding(
            padding: EdgeInsets.only(bottom: 10),
            child: GenderField(['Male','Female','Other'])
)
person Zujaj Misbah Khan    schedule 09.12.2020

arrow_upward

arrow_downward

person    schedule
comment
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, как и / или почему он решает проблему, улучшит долгосрочную ценность ответа. - person Piotr Labunski; 29.02.2020