import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:haufa/controllers/report_controller.dart';
import 'package:haufa/pages/Tabbar/homescreen_tabbar.dart';

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

  @override
  State<ReportSituationSelectRiskLevel> createState() =>
      _ReportSituationSelectRiskLevelState();
}

bool scenarioOption = true;

class _ReportSituationSelectRiskLevelState
    extends State<ReportSituationSelectRiskLevel> {
  final controller = ReportController();

  final ScrollController _controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: false,
      appBar: AppBar(
        toolbarHeight: 0,
        elevation: 0,
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.white,
      body: Column(
        children: [
          SizedBox(
            height: 48.h,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              SizedBox(width: 60.w),
              Text(
                "Verify situation",
                style: GoogleFonts.inter(
                  fontSize: 18,
                  fontWeight: FontWeight.w500,
                  color: Color(0xFFF374151),
                ),
              ),
              IconButton(
                splashRadius: 21,
                color: Color(0xFFF9CA3AF),
                onPressed: () {
                  Navigator.pop(context);
                },
                icon: Icon(Icons.close),
              ),
            ],
          ),
          SizedBox(
            height: 28.h,
          ),
          Text(
            "Select a scenario",
            style: GoogleFonts.inter(
              fontSize: 16,
              fontWeight: FontWeight.w400,
              color: Color(0xFFF374151),
            ),
          ),
          SizedBox(
            height: 24.h,
          ),

          // #### Here is where the iteration problem occured.

          Container(
            height: 475.h,
            child: Scrollbar(
                child: GridView.builder(
              padding: EdgeInsets.only(left: 10.w, right: 10.w),
              itemCount: 12,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
              ),
              itemBuilder: (context, index) => scenarioCard(index),
            )),

          ),
          SizedBox(
            height: 24.h,
          ),
          Padding(
            padding: const EdgeInsets.only(left: 30.0, right: 30),
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                elevation: 2,
                shadowColor: Color(0xfff0000000D),
                primary: Color(0xFFFD9D9D9),
                minimumSize: Size.fromHeight(37.53),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(6),
                  ),
                ),
              ),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => HomeScreenTabBar()),
                );
                // if (_formKey.currentState!.validate()) {
                //   _formKey.currentState!.save();
                //   KeyboardUtil.hideKeyboard(context);
                // }
              },
              child: Text(
                "Next",
                style: GoogleFonts.inter(
                  fontSize: 16,
                  fontWeight: FontWeight.w600,
                  color: Color(0xFFF8C8C8C),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget scenarioCard(int index) => Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        child: Container(
          height: 175.h,
          width: 149.w,
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(right: 100.0),
                child: Radio<bool?>(
                  value: controller.reportCards[index].selectedValue,
                  groupValue: scenarioOption,
                  onChanged: (value) {
                    setState(
                      () {
                        scenarioOption = value!;
                      },
                    );
                  },
                ),
              ),

              SvgPicture.asset(controller.reportCards[index].svgImage),

              SizedBox(
                height: 8.h,
              ),
              Text(
                controller.reportCards[index].title,
                style: GoogleFonts.inter(
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                  color: Color(0xFFF434343),
                ),
              ),
              // Text("data")
            ],
          ),
        ),
      );
}

CodePudding user response：

instead of using bool, to select a single item you can use int

int? selectedIndex ;

Padding(
  padding: const EdgeInsets.only(right: 100.0),
  child: Radio<int?>(
    value: index,
    groupValue: selectedIndex,
    onChanged: (value) {
      setState(
        () {
          selectedIndex = value;
        },
      );
    },
  ),
),

Also Radio can be used with model or other data type.

CodePudding user response：

To make a Card clickable you have to wrap it in an InkWell widget:

InkWell(
    child: Card(...),
    onTap:(){...}
)

https://api.flutter.dev/flutter/material/InkWell-class.html

However, in your code you have this comment // #### Here is where the iteration problem occured., but you didn't say what is the problem.