How To Create Horizonatal Radio Group Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 30-10-2020

It is difficult to achieve Radio Button proper alignment in flutter mobile applications without knowing all the widgets. Using the Row widget and proper combination of Radio widget with Text widget we can easily show Set Align Radio Button in Horizontal Format in Flutter Android iOS app example tutorial.

How To Create Horizonatal Radio Group Using Flutter App

Horizonatal Radio Group
Complete Code For Horizonatal Radio Group In Flutter
main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() {
    return new MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  int _currValue = 1;

  List<int> _group = [1, 2, 3, 4, 5, 6];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amberAccent,
        title: Text("Horizontal Radio Group"),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              child: Text('Horizonatal Radio Group',style: TextStyle(fontSize: 18),),
            ),
          ),
          Center(
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                children: _group
                    .map((item) => Radio(
                  activeColor: Colors.amberAccent,
                  groupValue: _currValue,
                  onChanged: (int i) => setState(() => _currValue = i),
                  value: item,
                ))
                    .toList()),
          ),
        ],
      ),
    );
  }
}

 

Related Post