Axborot texnologiyalari va kommunikatsiyalarini rivojlantirish vazirligi muhammad al-xorazmiy nomidagi toshkent axborot texnologiyalari universiteti

2.2. Ilova interfeysini ishlab chiqish









Xulosa
Men sizga Flutterni yoqtirishimning bir nechta sabablarini aytib beraman va undan foydalanishni afzal ko'raman.

Flutter-dan foydalanadigan kompaniyalar


Oddiy o'rganish va rivojlanish
Flutter - bu zamonaviy platforma! Bu mobil ilovalar yaratishni ancha osonlashtiradi. Agar siz Java, Swift yoki React Native-dan foydalansangiz, biling: Flutter biroz boshqacha.
Shaxsan men Flutter-dan foydalanishni boshlashdan oldin mobil ilovalarni ishlab chiqishni hech qachon yoqtirmaganman.
Flutter menga nima yoqadi? Shunday qilib, siz bir nechta kodsiz mahalliy dastur yozishingiz mumkin.
Tez kompilyatsiya: maksimal ishlash
Flutter tufayli siz kodingizni o'zgartirishingiz va natijalarni real vaqtda ko'rishingiz mumkin. Bu Hot-Reload deb ataladi. Ilovaning o'zini yangilash uchun juda oz vaqt ketadi. Ba'zi muhim o'zgartirishlar ilovani qayta yuklashi mumkin, ammo agar siz dizayner sifatida ishlayotgan bo'lsangiz, masalan, elementlarning hajmini o'zgartirsangiz, bu faqat Hot-Reload rejimida mumkin!
MVP (Minimum Viable Product) ni ishga tushirish uchun ideal
Agar siz o'z mahsulotingizni investorlarga imkon qadar tezroq tanishtirmoqchi bo'lsangiz, Flutterdan foydalanishingiz mumkin!
Men o'z saytimda dasturlash bo'yicha bilimlarim va foydali tarkibimni baham ko'rishni yaxshi ko'raman. Men potentsialga to'la va juda ko'p ma'lumotga ega texnologiya ustida ishlayotganimni bilishim kerak. Flutter-dan foydalanishni boshlaganimda, men boshlagan birinchi narsa jamoalarni qidirish edi va men hayron bo'ldim ... Tajriba almashish va muloqot qilish uchun juda katta miqdordagi resurslar mavjud!


Foydalanilgan Adabiyotlar

1. 
   Rap Payne. “Flutter bilan ilovalarni ishlab chiqishni boshlash”. 05.12.2019.
   
2. 
   Kevin David Moore, Michael Katz va Vincent Ngo. “Flutter Apprentice”. 20.04.2020.
   
3. 
   Internet sahifalar:
   

• 
  flutter.dev
  
• 
  pub.dev
  
• 
  youtube.com
  
• 
  stackoverflow.com
  

Ilova
main.dart
import 'package:flutter/material.dart';
import 'Screens/splash_screen.dart';

void main() {

runApp(
const MaterialApp(
debugShowCheckedModeBanner: false,
home: SplashScreen(),
),
);
}
2-rasm dasturiy kodi:
splash_screen.dart
import 'dart:async';
import 'package:flutter/material.dart';
import 'home_screen.dart';

class SplashScreen extends StatefulWidget {

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

@override

_SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State {

@override
void initState() {
super.initState();
Timer(
const Duration(seconds: 2),
() => Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => const HomeScreen(),
),
),
);
}

@override

Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.white,
body: SizedBox(
width: size.width,
height: size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'images/logo.png',
width: size.width - 50,
height: size.height / 5 * 3,
),
const CircularProgressIndicator(
color: Colors.deepPurple,
),
const SizedBox(
height: 10,
),
const Text(
'Loading',
style: TextStyle(color: Colors.deepPurple),
),
],
),
),
);
}
}
3-rasm dasturiy kodi:
has_internet.dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'home_screen.dart';

class HasInternet extends StatefulWidget {

const HasInternet({Key? key}) : super(key: key);

@override

State createState() => _HasInternetState();
}

bool isConnect = false;

class _HasInternetState extends State {
hasInternet() async {
try {
final result = await InternetAddress.lookup('example.com');
if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
setState(() {
isConnect = true;
});
}
} on SocketException catch (_) {
isConnect = false;
}
}

@override

Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body: Container(
child: Center(
child: ElevatedButton(
onPressed: () => Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => isConnect ? HomeScreen() :
HasInternet(),
),
),

child: Text('Qayta tekshirish'),

),
),
),
);
}
}
4-rasm dasturiy kodi:
home_screen.dart
import 'package:flutter/material.dart';
import 'package:football_score/screens/league_container.dart';

class HomeScreen extends StatefulWidget {

const HomeScreen({Key? key}) : super(key: key);

@override

HomeScreenState createState() => HomeScreenState();
}

class HomeScreenState extends State {

@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.grey[300],
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'Competitions',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
const SizedBox(
height: 30,
),
MediaQuery.of(context).orientation != Orientation.landscape
? Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
LeagueContainer(
image: 'pl.jpg',
code: 'PL',
),
LeagueContainer(
image: 'pd.jpg',
code: 'PD',
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
LeagueContainer(
image: 'bl1.jpg',
code: 'BL1',
),
LeagueContainer(
image: 'sa.jpg',
code: 'SA',
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
LeagueContainer(
image: 'fl1.jpg',
code: 'FL1',
),
LeagueContainer(
image: 'ppl.jpg',
code: 'PPL',
),
],
),
],
)
: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
LeagueContainer(
image: 'pl.jpg',
code: 'PL',
),
LeagueContainer(
image: 'pd.jpg',
code: 'PD',
),
LeagueContainer(
image: 'bl1.jpg',
code: 'BL1',
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
LeagueContainer(
image: 'sa.jpg',
code: 'SA',
),
LeagueContainer(
image: 'fl1.jpg',
code: 'FL1',
),
LeagueContainer(
image: 'ppl.jpg',
code: 'PPL',
),
],
),
],
),
],
),
),
),
),
);
}
}

league_container.dart

import 'package:flutter/material.dart';
import 'package:football_score/screens/table_screen.dart';

class LeagueContainer extends StatelessWidget {

LeagueContainer({Key? key, required this.image, required this.code})
: super(key: key);

final String image;

final String code;

@override

Widget build(BuildContext context) {
return GestureDetector(
onTap: () => Navigator.push(context,
MaterialPageRoute(builder: (context) => TableScreen(code: code))),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.asset(
'images/$image',
width: MediaQuery.of(context).orientation == Orientation.landscape?MediaQuery.of(context).size.height*0.3:MediaQuery.of(context).size.width*0.35,
),
),
),
);
}
}

5-rasm dasturiy kodi:

table_screen.dart
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:football_score/Screens/information_screen.dart';
import 'package:http/http.dart' as http;

class TableScreen extends StatefulWidget {

const TableScreen({Key? key, required this.code}) : super(key: key);

final String code;

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

class _TableScreenState extends State

with TickerProviderStateMixin {
List _table = [];
List _result = [];
late TabController _tabController;
int currentMatchday = 0;

String match = '';

void getTitle() {
switch (widget.code) {
case 'PL':
match = 'Premier League';
break;
case 'PD':
match = 'LaLiga';
break;
case 'BL1':
match = 'Bundes Liga';
break;
case 'SA':
match = 'Seria A';
break;
case 'FL1':
match = 'Ligue 1';
break;
case 'PPL':
match = 'Liga';
break;
}
}

getTable() async {

http.Response response = await http.get(
Uri.parse(
'http://api.football-data.org/v2/competitions/${widget.code}/standings'),
headers: {'X-Auth-Token': '814f6025ae430dba078acc94bb2647'});
String body = response.body;
Map data = jsonDecode(body);
List table = data['standings'][0]['table'];
setState(() {
_table = table;
});
}

getResult() async {

http.Response response = await http.get(
Uri.parse(
'http://api.football-data.org/v2/competitions/${widget.code}/matches'),
headers: {'X-Auth-Token': '814f6025ae430dba078acc94bb2647'});
List table = jsonDecode(response.body)['matches'];
setState(() {
_result = table;
currentMatchday = _result[10]['season']['currentMatchday'];
});
}

@override

void initState() {
super.initState();
getTable();
getResult();
_tabController = TabController(length: 2, vsync: this);
getTitle();
}

@override

void dispose() {
super.dispose();
_tabController.dispose();
}

@override

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepPurple,
centerTitle: true,
title: Text(
match,
style:
const TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
),
actions: [
IconButton(
onPressed: () {
if (currentMatchday > 1 &&
currentMatchday <= _result[0]['season']['currentMatchday']) {
setState(() {
--currentMatchday;
});
}
},
icon: const Icon(Icons.arrow_back),
),
IconButton(
onPressed: () {
if (currentMatchday > 0 &&
currentMatchday <=
_result[0]['season']['currentMatchday'] - 1) {
setState(() {
++currentMatchday;
});
}
},
icon: const Icon(Icons.arrow_forward),
),
],
),
bottomNavigationBar: Container(
height: 60,
color: Colors.deepPurple,
child: TabBar(
controller: _tabController,
indicatorColor: Colors.deepPurple,
tabs: const [
Tab(
icon: Image(
image: AssetImage("images/scoreboard.png"),
color: Colors.white,
width: 30,
height: 30,
),
text: 'Score',
),
Tab(
icon: Image(
image: AssetImage("images/list.png"),
width: 30,
height: 30,
color: Colors.white,
),
text: 'Statics',
),
],
),
),
body: TabBarView(
controller: _tabController,
children: [
_result.isEmpty == true
? Container(
color: Colors.white,
child: const Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(
Colors.deepPurple,
),
),
),
)
: SizedBox(
child: ListView(
children: [
const SizedBox(
height: 10,
),
Center(
child: Text(
'$currentMatchday tur',
style: const TextStyle(
fontSize: 20, fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 10,
),
buildResult(),
],
),
width: MediaQuery.of(context).size.width,
),
_table.isEmpty == true
? Container(
color: Colors.white,
child: const Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(
Colors.deepPurple,
),
),
),
)
: Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Row(
children: [
Expanded(
child: Row(
children: const [
Text(" pos"),
SizedBox(
width: 15,
),
Text("club"),
],
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text("p"),
Text("w"),
Text("d"),
Text("l"),
Text("gd"),
Text("pnt "),
],
),
),
],
),
),
Expanded(
child: ListView(
children: [
buildTable(),
],
),
),
],
),
],
),
);
}

Widget buildTable() {

List teams = [];
for (var team in _table) {
teams.add(
Padding(
padding: const EdgeInsets.only(bottom: 10),
child: GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => InformationPage(
id: team['team']['id'].toString(), code: widget.code),
),
),
child: Container(
padding: const EdgeInsets.only(
top: 10, bottom: 10, left: 5, right: 10),
color: const Color(0xAEDFE1FF),
child: Row(
children: [
Expanded(
child: Row(
children: [
team['position'].toString().length > 1
? Text(team['position'].toString())
: Text(" " + team['position'].toString() + ' '),
const SizedBox(
width: 10,
),
Row(
children: [
SizedBox(
width: 40,
height: 40,
child: _buildSvg('${team['team']['crestUrl']}'),
),
const SizedBox(
width: 6,
),
team['team']['name'].toString().length > 12
? Text(team['team']['name']
.toString()
.substring(0, 12) +
'...')
: Text(team['team']['name'].toString()),
],
)
],
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(team['playedGames'].toString()),
Text(team['won'].toString()),
Text(team['draw'].toString()),
Text(team['lost'].toString()),
Text(team['goalDifference'].toString()),
Text(team['points'].toString()),
],
),
),
],
),
),
),
),
);
}
return Column(
children: teams,
);
}

Widget buildResult() {

List results = [];
Size size = MediaQuery.of(context).size;
for (var result in _result) {
currentMatchday == result['matchday']
? results.add(
Padding(
padding: const EdgeInsets.fromLTRB(0, 12, 0, 0),
child: SizedBox(
height: 80,
child: Row(
children: [
buildContainer(
result['homeTeam']['id'], result['homeTeam']['name']),
SizedBox(
width: size.width / 3 - 20,
child: result['score']['fullTime']['homeTeam'] ==
null &&
result['score']['fullTime']['awayTeam'] == null
? Column(
children: [
const Text(
'Scheduled',
textAlign: TextAlign.center,
),
Text(
result['utcDate'].substring(0, 10),
),
Text(
result['utcDate'].substring(11, 16),
),
],
)
: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
result['score']['fullTime']['homeTeam']
.toString(),
style: const TextStyle(fontSize: 20),
),
const Text(
':',
style: TextStyle(fontSize: 20),
),
Text(
result['score']['fullTime']['awayTeam']
.toString(),
style: const TextStyle(fontSize: 20),
),
],
),
),
buildContainer(
result['awayTeam']['id'], result['awayTeam']['name']),
],
),
),
),
)
: null;
}
return Column(
children: results,
);
}

Widget buildContainer(int url, String name) {

Size size = MediaQuery.of(context).size;
return SizedBox(
width: size.width / 3 + 10,
// color: Colors.blue,
child: Column(
children: [
SvgPicture.network(
'https://crests.football-data.org/$url.svg',
width: 40,
height: 40,
cacheColorFilter: true,
placeholderBuilder: (BuildContext context) => Container(
// padding: const EdgeInsets.all(5.0),
child: const CircularProgressIndicator(),
),
),
Center(
child: Text(
name,
maxLines: 2,
textAlign: TextAlign.center,
),
),
],
),
);
}

Widget _buildSvg(String url) {

String svgpng = url.substring(url.length - 3, url.length);
return svgpng == 'svg'
? SvgPicture.network(
url,
)
: Image.network(
url,
);
}
}
6-rasm dasturiy kodi:
information_page.dart
import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:http/http.dart' as http;

class InformationPage extends StatefulWidget {

const InformationPage({Key? key, required this.id, required this.code})
: super(key: key);

final String id, code;

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

class _InformationPageState extends State {

List _table = [];
String teamCountry = '';
String teamName = '';
String teamAddress = '';
String teamWebsite = '';
String teamFounded = '';
String teamStadium = '';

getTable() async {

http.Response response = await http.get(
Uri.parse('http://api.football-data.org/v2/teams/${widget.id}'),
headers: {'X-Auth-Token': '814f6025ae430dba078acc94bb2647'});
String body = response.body;
Map data = jsonDecode(body);
List table = data['squad'];
String country = data['area']['name'];
String name = data['name'];
String address = data['address'];
String website = data['website'];
String founded = data['founded'].toString();
String venue = data['venue'];
setState(() {
_table = table;
teamCountry = country;
teamName = name;
teamAddress = address;
teamWebsite = website;
teamFounded = founded;
teamStadium = venue;
});
}

@override

void initState() {
super.initState();
getTable();
}

@override

Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: NestedScrollView(
floatHeaderSlivers: true,
headerSliverBuilder: (context, innerBoxIsScrolled) => [
const SliverAppBar(
backgroundColor: Colors.deepPurple,
title: Text('Team information'),
centerTitle: true,
),
],
body: ListView(
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
children: [
Column(
// crossAxisAlignment: CrossAxisAlignment.center,
children: [
SvgPicture.network(
'https://crests.football-data.org/${widget.id}.svg',
width: MediaQuery.of(context).size.width - 200,
),
const SizedBox(
height: 5,
),
Text(teamCountry),
const SizedBox(
height: 5,
),
Text(teamName),
const SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Text(
teamAddress,
textAlign: TextAlign.center,
),
),
const SizedBox(
height: 5,
),
Text(teamWebsite),
const SizedBox(
height: 5,
),
Text(teamFounded),
const SizedBox(
height: 5,
),
Text(teamStadium),
const SizedBox(
height: 5,
),
],
),
buildItem(),
],
),
),
);
}

Widget buildItem() {

List player = [];
for (var item in _table) {
player.add(
Padding(
padding: const EdgeInsets.all(5),
child: Container(
padding: const EdgeInsets.all(10),
color: const Color(0xAEDFE1FF),
child: Column(
children: [
Row(
children: [
const Text(
'Name:',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
const SizedBox(
width: 10,
),
Text(
item['name'].toString(),
style: const TextStyle(color: Colors.black),
),
],
),
item['dateOfBirth'].toString() != 'null'
? Row(
children: [
const Text(
'Data of birth:',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black),
),
const SizedBox(
width: 10,
),
Text(
item['dateOfBirth'].toString().substring(0, 10),
style: const TextStyle(color: Colors.black),
),
],
)
: SizedBox(
height: 0,
),
Row(
children: [
const Text(
'Position:',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
const SizedBox(
width: 10,
),
Text(
item['position'].toString(),
style: const TextStyle(color: Colors.black),
),
],
),
Row(
children: [
const Text(
'Country of birth:',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
const SizedBox(
width: 10,
),
Text(
item['countryOfBirth'].toString(),
style: const TextStyle(color: Colors.black),
),
],
),
Row(
children: [
const Text(
'Nationality:',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
const SizedBox(
width: 10,
),
Text(
item['nationality'].toString(),
style: const TextStyle(color: Colors.black),
),
],
),
],
),
),
),
);
}
return Column(
children: player,
);
}
}
pubspec.yaml
name: football_score
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:

sdk: ">=2.12.0 <3.0.0"

dependencies:

flutter:
sdk: flutter

http: ^0.13.4

flutter_svg: ^0.23.0+1

data_connection_checker: ^0.3.4

dev_dependencies:
flutter_test:
sdk: flutter

flutter_lints: ^1.0.0

flutter:

uses-material-design: true

assets:
- images/