UI Soal

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: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List questions = [
    {
      "question_number": "1",
      "question_description":
          "Apakah nama bidang yang ditunjukkan oleh huruf A?",
      "image":
          "https://i.ibb.co/xCKNk8D/Screen-Shot-2020-08-14-at-10-24-41.png",
      "option_a": "Bidang mediana",
      "option_b": "Bidang sagital",
      "option_c": "Bidang coronal",
      "option_d": "Bidang transversal",
      "option_e": "Bidang horizontal",
    },
    {
      "question_number": "2",
      "question_description": "Apakah nama arah yang ditunjuukan oleh huruf C?",
      "image":
          "https://i.ibb.co/VJWByMx/Screen-Shot-2020-08-14-at-10-24-52.png",
      "option_a": "Anterior",
      "option_b": "Superior",
      "option_c": "Inferior",
      "option_d": "Lateral",
      "option_e": "Medial",
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red[300],
        title: Text("Soal"),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: Column(
            children: [
              ...List.generate(questions.length, (index) {
                var question = questions[index];

                var questionNumber = question["question_number"];
                var questionDescription = question["question_description"];
                var image = question["image"];
                var optionA = question["option_a"];
                var optionB = question["option_b"];
                var optionC = question["option_c"];
                var optionD = question["option_d"];
                var optionE = question["option_e"];
                var answer = question["answer"];

                return Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      padding: EdgeInsets.all(4.0),
                      width: MediaQuery.of(context).size.width,
                      child: Text("$questionNumber. $questionDescription"),
                    ),
                    Container(
                      padding: EdgeInsets.all(4.0),
                      width: MediaQuery.of(context).size.width,
                      child: Row(
                        children: [
                          Expanded(
                            child: Image.network(image),
                          ),
                          Expanded(
                            child: Container(
                              child: Column(
                                children: [
                                  Row(
                                    children: [
                                      Radio(
                                        value: answer,
                                        groupValue: "a",
                                        onChanged: (newValue) {
                                          question["answer"] = "a";
                                          setState(() {});
                                        },
                                      ),
                                      Expanded(child: Text(optionA)),
                                    ],
                                  ),
                                  Row(
                                    children: [
                                      Radio(
                                        value: answer,
                                        groupValue: "b",
                                        onChanged: (newValue) {
                                          question["answer"] = "b";
                                          setState(() {});
                                        },
                                      ),
                                      Expanded(child: Text(optionB)),
                                    ],
                                  ),
                                  Row(
                                    children: [
                                      Radio(
                                        value: answer,
                                        groupValue: "c",
                                        onChanged: (newValue) {
                                          question["answer"] = "c";
                                          setState(() {});
                                        },
                                      ),
                                      Expanded(child: Text(optionC)),
                                    ],
                                  ),
                                  Row(
                                    children: [
                                      Radio(
                                        value: answer,
                                        groupValue: "d",
                                        onChanged: (newValue) {
                                          question["answer"] = "d";
                                          setState(() {});
                                        },
                                      ),
                                      Expanded(child: Text(optionD)),
                                    ],
                                  ),
                                  Row(
                                    children: [
                                      Radio(
                                        value: answer,
                                        groupValue: "e",
                                        onChanged: (newValue) {
                                          question["answer"] = "e";
                                          setState(() {});
                                        },
                                      ),
                                      Expanded(child: Text(optionE)),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                );
              }),
            ],
          ),
        ),
      ),
    );
  }
}