Flutter Course: Implementing Features of Lotto App 13.3

Flutter is Google’s UI toolkit for building natively compiled applications for mobile from a single codebase. It performs well on various platforms and provides an attractive user interface. In this course, we will learn how to implement the functionality of a lottery app using Flutter. The lottery app is a useful mobile application that allows users to draw lottery numbers and compare them with winning numbers to check the results.

1. Preparing the Project

To create a lottery app, we first need to set up the Flutter environment. Install the Flutter SDK and create a new project.

flutter create lotto_app

Navigate to the created project directory and install the necessary packages.

cd lotto_app

2. Designing the App Structure

The lottery app has two main functions: allowing users to select numbers and checking the winning numbers. When designing the app’s structure, it is important to clearly separate each screen with a focus on user experience.

2.1 Screen Composition

  • Main Screen: A screen with buttons for number selection and drawing
  • Result Screen: A screen that shows the results by comparing with the winning numbers

To implement these two screens, we will utilize Flutter’s Navigator to manage navigation between screens.

3. Implementing Number Selection Functionality

3.1 UI Composition

We will set up the UI on the main screen to allow users to select lottery numbers. We will use GridView to arrange the numbers and allow user selection.

import 'package:flutter/material.dart';

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State {
  List selectedNumbers = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Lottery Number Picker')),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        itemCount: 45,
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () => _onNumberTap(index + 1),
            child: Container(
              margin: EdgeInsets.all(4),
              decoration: BoxDecoration(
                color: selectedNumbers.contains(index + 1) ? Colors.blue : Colors.grey[200],
                borderRadius: BorderRadius.circular(10),
              ),
              child: Center(child: Text('${index + 1}', style: TextStyle(fontSize: 24))),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _drawNumbers,
        tooltip: 'Draw Numbers',
        child: Icon(Icons.monetization_on),
      ),
    );
  }

  void _onNumberTap(int number) {
    setState(() {
      if (selectedNumbers.contains(number)) {
        selectedNumbers.remove(number);
      } else {
        if (selectedNumbers.length < 6) {
          selectedNumbers.add(number);
        }
      }
    });
  }

  void _drawNumbers() {
    // Implement drawing logic
  }
}

3.2 Number Drawing Logic

When the user selects 6 numbers, we generate the winning numbers randomly, ensuring there are no duplicates.


void _drawNumbers() {
  Random random = Random();
  Set winningNumbers = {};
  
  while (winningNumbers.length < 6) {
    winningNumbers.add(random.nextInt(45) + 1);
  }

  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => ResultScreen(selectedNumbers: selectedNumbers.toSet(), winningNumbers: winningNumbers.toSet()),
    ),
  );
}

4. Implementing the Result Screen

We create a screen that shows the results by comparing the winning numbers with the numbers selected by the user.

class ResultScreen extends StatelessWidget {
  final Set selectedNumbers;
  final Set winningNumbers;

  ResultScreen({required this.selectedNumbers, required this.winningNumbers});

  @override
  Widget build(BuildContext context) {
    int matches = selectedNumbers.intersection(winningNumbers).length;

    return Scaffold(
      appBar: AppBar(title: Text('Result Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Winning Numbers: ${winningNumbers.join(", ")}', style: TextStyle(fontSize: 24)),
            Text('Your Selected Numbers: ${selectedNumbers.join(", ")}', style: TextStyle(fontSize: 24)),
            Text('Matched Count: $matches', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
          ],
        ),
      ),
    );
  }
}

5. Final Structure of the App

We will combine all the classes implemented above to create the final structure of the lottery app. Navigation between screens occurs through Navigator. When the user selects numbers and clicks the draw button, they will be taken to the result screen.

6. Improving the App Design

With the basic functionalities implemented, we will enhance the app’s design to provide a more attractive user experience. For example, we can unify the color scheme and add animation effects to the buttons.

7. Additional Feature Suggestions

  • Winning Probability Calculator: Calculates the winning probability based on the user’s selected numbers.
  • View Previous Draw Results: Stores previous winning numbers and displays them to the user.
  • Lottery Statistics: Visually presents various data about monthly statistics.

8. Conclusion

In this course, we learned how to implement basic functionalities for a lottery app using Flutter. The lottery app is a simple yet useful application that allows users to experience fun through number selection, drawing, and checking results. Additional features can provide a richer experience and evolve into your brand.

When undertaking any project, it is important to start from the basics and gradually add more complex features. Through this course, I hope you learn the basic functionalities of Flutter and challenge yourself to work on more complex app developments.

References