<\/p>\n
Hello, developers! In this course, we will learn how to improve the user interface (UI) of the Lotto app. In the previous course, we implemented features to generate Lotto numbers and display the results. Now, let’s enhance the UI to improve the user experience further.<\/p>\n
First, let’s take another look at the existing Lotto app project. The existing Lotto app has only basic features like a number generator. When the app is run, randomly generated Lotto numbers are displayed on the screen.<\/p>\n
The structure of the existing code is as follows.<\/p>\n
\nimport 'package:flutter\/material.dart';\nimport 'dart:math';\n\nvoid main() => runApp(LottoApp());\n\nclass LottoApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n title: 'Lotto App',\n home: LottoHome(),\n );\n }\n}\n\nclass LottoHome extends StatefulWidget {\n @override\n _LottoHomeState createState() => _LottoHomeState();\n}\n\nclass _LottoHomeState extends State {\n List lottoNumbers = [];\n\n void generateNumbers() {\n lottoNumbers = List.generate(6, (index) => Random().nextInt(45) + 1)..sort();\n setState(() {});\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(title: Text('Lotto Number Generator')),\n body: Center(\n child: Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\n Text(\n 'Generated Lotto Numbers:',\n style: TextStyle(fontSize: 24),\n ),\n SizedBox(height: 20),\n Text(\n lottoNumbers.join(', '),\n style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),\n ),\n SizedBox(height: 30),\n ElevatedButton(\n onPressed: generateNumbers,\n child: Text('Generate Numbers'),\n ),\n ],\n ),\n ),\n );\n }\n}\n<\/code><\/pre>\nNow let’s explore various ways to improve the UI.<\/p>\n
2. Establishing a UI Improvement Plan<\/h2>\n
To improve the UI, we can consider the following elements:<\/p>\n
\n- Changing the color scheme<\/li>\n
- Adjusting font styles and sizes<\/li>\n
- Applying card or grid layouts to make the numbers stand out more<\/li>\n
- Improving button design<\/li>\n
- Adding animation effects<\/li>\n<\/ul>\n
2.1 Changing the Color Scheme<\/h3>\n
Using an eye-catching and enjoyable color combination instead of a simple color palette can provide a pleasant experience for users. For example, set a light color for the background and a contrasting dark color for the text.<\/p>\n
2.2 Adjusting Font Styles and Sizes<\/h3>\n
To create a more attractive user experience, various font styles can be applied. Try using more unique fonts than the default one to change the mood of the app. You can easily apply a variety of fonts using Google Fonts.<\/p>\n
2.3 Applying Card or Grid Layouts<\/h3>\n
By outputting Lotto numbers using cards, information can be conveyed more clearly. Additionally, let\u2019s apply a grid layout to arrange the Lotto numbers.<\/p>\n
2.4 Improving Button Design<\/h3>\n
Rather than using the default button, customize a button that includes selectable color combinations and text styles to emphasize button presses more.<\/p>\n
2.5 Adding Animation Effects<\/h3>\n
Adding animation effects to buttons or UI elements can significantly enhance the user experience. Flutter provides various tools to easily implement animations.<\/p>\n
3. Implementing UI Improvements<\/h2>\n
Now, based on the established plan, let’s modify the actual code to enhance the existing Lotto app by correcting certain elements.<\/p>\n
3.1 Changing the Color Scheme<\/h3>\n
First, let’s change the color scheme to increase the contrast between the background and the text. Modify the build<\/code> method in the main.dart<\/code> file.<\/p>\n\nclass LottoApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n title: 'Lotto App',\n theme: ThemeData(\n primarySwatch: Colors.blue,\n scaffoldBackgroundColor: Colors.lightBlue[50],\n textTheme: TextTheme(\n bodyText1: TextStyle(color: Colors.grey[800]),\n bodyText2: TextStyle(color: Colors.black),\n ),\n ),\n home: LottoHome(),\n );\n }\n}\n<\/code><\/pre>\n3.2 Adjusting Font Styles and Sizes<\/h3>\n
Next, let’s change the default text style. We can apply a more attractive font by adding the style<\/code> property to the Text<\/code> widget.<\/p>\n\nText(\n 'Generated Lotto Numbers:',\n style: TextStyle(\n fontSize: 28,\n fontWeight: FontWeight.bold,\n fontFamily: 'Roboto',\n ),\n),\n<\/code><\/pre>\n3.3 Applying Grid Layout<\/h3>\n
We will change the display of Lotto numbers to a grid format. Adding the code below will wrap each number in a card, making it visually appealing.<\/p>\n
\nGridView.builder(\n gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(\n crossAxisCount: 3,\n childAspectRatio: 1,\n crossAxisSpacing: 10,\n mainAxisSpacing: 10,\n ),\n itemCount: lottoNumbers.length,\n itemBuilder: (context, index) {\n return Card(\n color: Colors.yellowAccent,\n child: Center(\n child: Text(\n lottoNumbers[index].toString(),\n style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),\n ),\n ),\n );\n },\n),\n<\/code><\/pre>\n3.4 Improving Button Design<\/h3>\n
To enhance the button design, we will add properties to the ElevatedButton<\/code> to change its style.<\/p>\n\nElevatedButton(\n onPressed: generateNumbers,\n style: ElevatedButton.styleFrom(\n primary: Colors.blue,\n onPrimary: Colors.white,\n padding: EdgeInsets.symmetric(horizontal: 25, vertical: 15),\n shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),\n ),\n child: Text('Generate Numbers', style: TextStyle(fontSize: 20)),\n),\n<\/code><\/pre>\n3.5 Adding Animation Effects<\/h3>\n
We will use AnimatedContainer<\/code> to apply animation effects when the button is clicked. The animation effect will be activated upon pressing the button.<\/p>\n\nAnimatedContainer(\n duration: Duration(milliseconds: 200),\n decoration: BoxDecoration(\n color: buttonPressed ? Colors.green : Colors.blue,\n borderRadius: BorderRadius.circular(30),\n ),\n child: ElevatedButton(\n onPressed: () {\n setState(() {\n buttonPressed = !buttonPressed;\n });\n generateNumbers();\n },\n child: Text('Generate Numbers', style: TextStyle(fontSize: 20)),\n ),\n),\n<\/code><\/pre>\n4. Final Code<\/h2>\n
We will integrate all of the above code to create the final code as follows.<\/p>\n
\nimport 'package:flutter\/material.dart';\nimport 'dart:math';\n\nvoid main() => runApp(LottoApp());\n\nclass LottoApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n title: 'Lotto App',\n theme: ThemeData(\n primarySwatch: Colors.blue,\n scaffoldBackgroundColor: Colors.lightBlue[50],\n textTheme: TextTheme(\n bodyText1: TextStyle(color: Colors.grey[800]),\n bodyText2: TextStyle(color: Colors.black),\n ),\n ),\n home: LottoHome(),\n );\n }\n}\n\nclass LottoHome extends StatefulWidget {\n @override\n _LottoHomeState createState() => _LottoHomeState();\n}\n\nclass _LottoHomeState extends State {\n List lottoNumbers = [];\n bool buttonPressed = false;\n\n void generateNumbers() {\n lottoNumbers = List.generate(6, (index) => Random().nextInt(45) + 1)..sort();\n setState(() {});\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(title: Text('Lotto Number Generator')),\n body: Center(\n child: Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\n Text('Generated Lotto Numbers:', style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, fontFamily: 'Roboto')),\n SizedBox(height: 20),\n Expanded(\n child: GridView.builder(\n gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(\n crossAxisCount: 3,\n childAspectRatio: 1,\n crossAxisSpacing: 10,\n mainAxisSpacing: 10,\n ),\n itemCount: lottoNumbers.length,\n itemBuilder: (context, index) {\n return Card(\n color: Colors.yellowAccent,\n child: Center(\n child: Text(\n lottoNumbers[index].toString(),\n style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),\n ),\n ),\n );\n },\n ),\n ),\n SizedBox(height: 30),\n ElevatedButton(\n onPressed: () {\n setState(() {\n buttonPressed = !buttonPressed;\n });\n generateNumbers();\n },\n style: ElevatedButton.styleFrom(\n primary: Colors.blue,\n onPrimary: Colors.white,\n padding: EdgeInsets.symmetric(horizontal: 25, vertical: 15),\n shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),\n ),\n child: Text('Generate Numbers', style: TextStyle(fontSize: 20)),\n ),\n ],\n ),\n ),\n );\n }\n}\n<\/code><\/pre>\n5. Conclusion and Future Improvement Directions<\/h2>\n
So far, we have learned how to improve the UI of the Lotto app. By improving the app’s design in various ways, we can enhance the user’s experience. In the future, we can enrich the Lotto app even further by adding additional features, such as visualizing historical data for Lotto numbers or providing a record-keeping function for the numbers generated by the user.<\/p>\n
I hope this course has been helpful to developers like you, and I look forward to bringing you another topic in the next course. Thank you for reading to the end!<\/p>\n","protected":false},"excerpt":{"rendered":"