UI Quiz

  • Screen 1

    UI

    1. main.dart

    
    import 'package:flutter/material.dart';
    import 'package:a/screens/home_page.dart';
    
    import 'dart:ui';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        double screenWidth = window.physicalSize.width;
        return MaterialApp(
          debugShowCheckedModeBanner: false,
    
          theme: ThemeData(
              scaffoldBackgroundColor: Color(0xffffff)
           ),
          home: HomePage(),
        );
      }
    }
    
    

    2. home_page.dart

    1. Column() - for dividing the screen vertically

    
    import 'package:flutter/material.dart';
    import 'package:a/widgets/quiz_header.dart';
    
    class HomePage extends StatelessWidget {
    
      HomePage({super.key});
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: SafeArea(
              child: Column(
                children: [
                  QuizHeader()
                ],
              ),
            )
        );
      }
    }
    

    3. QuizHeader

    widgets/quiz_header.dart

    1. bg image

    1. Container - for bg image

    
    import 'package:flutter/material.dart';
    class QuizHeader extends StatelessWidget {
    
    
      @override
      Widget build(BuildContext context) {
        return Container(
            height: 200,
            child: Stack(
              children: [
                Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage("images/bg.jpg"),
                      fit:BoxFit.cover
                    )
                  ),
    
                )
              ],
            ),
    
    
        );
    
      }
    }
    
    2. add the top row

    1. stack() for overlapping the elements

    2. container() - for bg image

    3. Row() - for horizontal dividing

    4. Column() for dividing vertically

    5. CircleAvatar

    
    import 'package:flutter/material.dart';
    class QuizHeader extends StatelessWidget {
    
    
      @override
      Widget build(BuildContext context) {
        return Stack(
          children: [
            Container(
              height: 200,
              padding: EdgeInsets.only(top: 20, left:15,right:15),
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage("images/bg.jpg"),
                      fit:BoxFit.cover
                  )
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
    
                  Column(
                    children: [
                      Text(
                        "Let's Play",
                        style: TextStyle(
                            fontWeight: FontWeight.w600,
                            fontSize: 30,
                            color: Colors.white
                        ),
                      )
    
                      ,
    
                      Text(
                        "And be the first",
                        style: TextStyle(
                            fontWeight: FontWeight.w500,
                            fontSize: 15,
                            color: Colors.white
                        ),
                      )
    
                    ],
                  ),
    
    
                  CircleAvatar(
                    child: Text(
                      "MV"
                    ),
                  )
    
                ],
              ),
    
            )
          ],
        );
    
      }
    }
    
    3. place card layout ove the bg image
    
    
    import 'package:flutter/material.dart';
    class QuizHeader extends StatelessWidget {
    
    
      @override
      Widget build(BuildContext context) {
        return SizedBox(
          height: 280,
          child: Stack(
            children: [
              Container(
                height: 200,
                padding: EdgeInsets.only(top: 20, left:15,right:15),
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage("images/bg.jpg"),
                        fit:BoxFit.cover
                    )
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
    
                    Column(
                      children: [
                        Text(
                          "Let's Play",
                          style: TextStyle(
                              fontWeight: FontWeight.w600,
                              fontSize: 30,
                              color: Colors.white
                          ),
                        )
    
                        ,
    
                        Text(
                          "And be the first",
                          style: TextStyle(
                              fontWeight: FontWeight.w500,
                              fontSize: 15,
                              color: Colors.white
                          ),
                        )
    
                      ],
                    ),
    
    
                    CircleAvatar(
                      child: Text(
                          "MV"
                      ),
                    )
    
                  ],
                ),
    
              ),
    
              Positioned(
                bottom: -20,
                left: 0,
                right: 0,
    
                child: Padding(
                    padding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
                    child: SizedBox(
                      height: 140,
                      child: Card(
    
                      ),
                    )
                ),
              )
            ],
          ),
        );
    
      }
    }
    
    
    4. place the content
    
    
    import 'package:flutter/material.dart';
    class QuizHeader extends StatelessWidget {
    
    
      @override
      Widget build(BuildContext context) {
        return SizedBox(
          height: 250,
          child: Stack(
            children: [
              Container(
                height: 200,
                padding: EdgeInsets.only(top: 20, left:15,right:15),
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage("images/bg.jpg"),
                        fit:BoxFit.cover
                    )
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
    
                    Column(
                      children: [
                        Text(
                          "Let's Play",
                          style: TextStyle(
                              fontWeight: FontWeight.w600,
                              fontSize: 30,
                              color: Colors.white
                          ),
                        )
    
                        ,
    
                        Text(
                          "And be the first",
                          style: TextStyle(
                              fontWeight: FontWeight.w500,
                              fontSize: 15,
                              color: Colors.white
                          ),
                        )
    
                      ],
                    ),
    
    
                    CircleAvatar(
                      child: Text(
                          "MV"
                      ),
                    )
    
                  ],
                ),
    
              ),
    
              Positioned(
                bottom: -20,
                left: 0,
                right: 0,
    
                child: Padding(
                    padding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
                    child: SizedBox(
                      height: 140,
                      child: Card(
                        elevation: 5,
                        shadowColor: Colors.black,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.all(
                            Radius.circular(10)
                          )
                        ),
                        child: Padding(
                          padding: EdgeInsets.all(8),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              
                              
                              Text(
                                  "Enter your quiz code"
                              ),
    
                              Text(
                                  "To play with your friends"
                              ),
    
                              Row(
                                children: [
    
                                  Expanded(
                                    child:TextField(
                                      decoration: InputDecoration(
                                          hintText: "Code",
                                          contentPadding: EdgeInsets.all(10),
                                          border: OutlineInputBorder(
                                              borderRadius: BorderRadius.all(Radius.circular(10))
                                          )
                                      ),
                                    ),
                                  ),
    
                                  ElevatedButton(
                                    onPressed: (){},
                                    child: Text(
                                        "Join"
                                    ),
                                  )
                                ],
                              )
    
                              
                              
                            ],
    
                          ),
                        )
                      ),
                    )
                ),
              )
            ],
          ),
        );
    
      }
    }
    
    
    5. add recent quiz

    file: screens/home_page.dart

    
    import 'package:flutter/material.dart';
    import 'package:a/widgets/quiz_header.dart';
    import 'package:a/widgets/recent_quiz.dart';
    
    class HomePage extends StatelessWidget {
    
      HomePage({super.key});
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: SafeArea(
              child: Column(
                children: [
                  QuizHeader(),
                  SizedBox(height: 20,),
                  Expanded(
                    child: ListView(
                      children: [
                        Text(
                          "Recent Quiz",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 20
                          ),
                        ),
    
                        RecentQuiz(),
                        RecentQuiz(),
                        RecentQuiz(),
                        RecentQuiz(),
                        RecentQuiz()
                      ],
                    ),
                  )
    
                ],
              ),
            )
        );
      }
    }
    
    

    widget :RecentQuiz

    file : widgets/recent_quiz.dart

    
    import 'package:flutter/material.dart';
    class RecentQuiz extends StatelessWidget {
    
    
      @override
      Widget build(BuildContext context) {
        return Card(
          elevation: 5,
          shadowColor: Colors.redAccent,
          child: ListTile(
            onTap: (){},
            contentPadding:   EdgeInsets.all(15),
            leading: Container(
                width: 50,
                height: 50,
                decoration: BoxDecoration(
                  color: Colors.redAccent,
                  borderRadius: BorderRadius.circular(10)
                ),
            ),
          ),
        );
      }
    }
    
    Body

    1. card()

    2. ListTile

    
    
    import 'package:flutter/material.dart';
    class RecentQuiz extends StatelessWidget {
    
    
      @override
      Widget build(BuildContext context) {
        return Card(
          elevation: 5,
          shadowColor: Colors.redAccent,
          child: ListTile(
            onTap: (){},
            contentPadding:   EdgeInsets.all(15),
            leading: Container(
                width: 50,
                height: 50,
                decoration: BoxDecoration(
                  color: Colors.redAccent,
                  borderRadius: BorderRadius.circular(10)
                ),
              child: Icon(
                Icons.favorite_outline
              ),
            ),
            title: Text("Maths"),
            subtitle: Row(
              children: [
                Icon(
                  Icons.local_airport
                ),
                Text("10/10Questions")
              ],
            )
          ),
        );
      }
    }
    
    
  • Screen 2

    add following code where do you want

    1. PageView

    2. ListView

    3. RadioListTile

    
                        Expanded(
                          child: PageView.builder(
                            itemCount: 10,
                            itemBuilder: (context, index){
                                return ListView(
                                  children: [
    
    
                                      Padding(
                                        padding: EdgeInsets.only(bottom: 2),
                                        child: RadioListTile(
                                          value:1,
                                          groupValue:false,
                                          title: Text("option1"),
                                          onChanged: (value){},
                                        ),
                                      ),
    
    
                                    Padding(
                                      padding: EdgeInsets.only(bottom: 2),
                                      child: RadioListTile(
                                        value:1,
                                        groupValue:false,
                                        title: Text("option2"),
                                        onChanged: (value){},
                                      ),
                                    )
    
    
                                  ],
                                );
                            },
                          ),
                  )