Çoktan Seçmeli Soru Ekranı Tasarımı

Bu işlem için kullanılacak widgetlar aşağıya çıkarılmıştır.

Text, ElevatorButton, Padding, Container, Center widgetları kullanılmıştır.

Ders anlatım videosuna ulaşmak için tıklayınız.

import 'package:flutter/material.dart';

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

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

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              
              Expanded(
                flex: 5,
                child: Container(
                  color: Colors.lightBlueAccent,
                  child: Center(child: Text("Soru1", style: TextStyle(fontSize: 40),)),
                ),
              ),
              Expanded(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Expanded(
                      child: ElevatedButton(
                        onPressed: () {},
                        child: Text("A-Sikki"),
                      ),
                    ),
                    Expanded(
                      child: ElevatedButton(
                        onPressed: () {},
                        child: Text("B-Sikki"),
                      ),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Expanded(
                      child: ElevatedButton(
                        onPressed: () {},
                        child: Text("C-Sikki"),
                      ),
                    ),
                    Expanded(
                      child: ElevatedButton(
                        onPressed: () {},
                        child: Text("D-Sikki"),
                      ),
                    ),
                  ],
                ),
              ),
            Expanded(flex:1,child: Container(
              color: Colors.greenAccent,

              child: Center(child: Text("Mesaj Alanı")),))],
          ),
        ),
      ),
    );
  }
}