Team U-smart's Simple Trivia Game: Steps For Contributing A Splash Screen (flutter)

INTRODUCTION

We are in the last few days of working on our final collaborative project, in this short hackathon sprint; as we wrap up our training in the ADA Software Engineering Program.

I opted for the MOBILE APP DEV - FLUTTER track and it has been an unforgettable journey.

My collaboration team is called the U-smart team, and we had to build a simple mobile game. We were of the following tracks:

Product Design
Cloud
Front End
Data
Project Manager and the
Mobile track.

We had a meeting where we brainstormed and eventually settled for a simple trivia game.

It was to be a challenge but we were ready for the adventure, so we started.

SECTION 1

Being in the mobile app team for this hackathon, my assignment was to work on the Splash screen. I worked in close collaboration with the product design team who worked on the design in Figma and then made the designs available to the dev team; and the splash screen design to me eventually. Once the splash screen design was ready, I attempted to convert it to the flutter code.

Since I am new to the Flutter language, I sought some help from people more experienced in writing flutter codes and also watched some videos to help me get by with the project code. I also engaged my facilitator (faci) in looking into the code I eventually came up with; seeking his assistance and guidance in debugging the code and getting it to run. My faci encouraged me to complete the rest of the code after he had given me a head start.

The beginning structure of the code could look like this:

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';


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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: SplashScreen());
  }
}


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

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



class SplashScreenState extends State<SplashScreen>  {

SECTION 2

While working on the codes, I met with my team, the dev team severally to discuss our progress on the codes. I took advantage also to try as much as I could to work on unblocking blockers in the code.

My splash screen was to be the first then a play screen that had the questions for playing the game. At the end of the game, there is a question on if you want to play again; and then the game starts up all over again or ends.

CONCLUSION

The process to the end of the game began with my debugging and running the code for the splash screen, and the other codes for the team; at the end of which the merge was done, at the end.

REFERENCES

Credit goes to: unsplash.com , ADA Software Engineering Program, Team U-smart, flutter.com.

Team U-smart's Simple Trivia Game: Steps For Contributing A Splash Screen (flutter) - Basics

ARTICLE ON STEPS TAKEN TO CREATING A SPLASH SCREEN USING FLUTTER FOR BEGINNERS

Table of contents

INTRODUCTION

SECTION 1

SECTION 2

CONCLUSION

REFERENCES