Ақпараттық-есептеуіш жүйелер кафедрасы
жүктеу/скачать 2,02 Mb.
|
Калдарбеков Саят мобилка
4.1 Мобильді қосымшаҚосыша бағдарламалау тілін үйрететін мобильді қосымшаны әзірлеу туралы. Кодтау туралы білім (немесе кейбіреулер оны кодтау сауаттылығы деп атайды) басқа жолдармен де көмектесуі мүмкін. Бұл сіздің басқа аспектілерді немесе технологияны тезірек меңгергеніңізді білдіруі мүмкін, сонымен қатар сіз цифрлық деңгейде еркін сөйлейсіз. Бүгінгі цифрлық еңбек нарығында бұл тек пайдалы болуы мүмкін. Егер сіз көптеген идеялары бар және бәрін кеше бастағысы келетін адам болсаңыз, кодтау сіз үшін керемет дағды. Кодерлерді басқа жерден іздеудің қажеті жоқ, уақыт пен ақшаны үнемдейді, сонымен қатар сіздің идеяңыз дамып келе жатқанда өзгертуді және қайта дизайнды жалғастыра алатыныңызды білдіреді. Осы себепті осы бағдарламада мен ең танымал бағдарламалау тілін үйретуді шештім. Біріншіден, бұл бастапқы құрылым, терезе ашумыз керек, ол былай болуы керек 4.1-суретте көрсетілген.[11] import 'package:animated_theme_switcher/animated_theme_switcher.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:learn_python/nav_pages/user_preferences.dart'; import 'package:learn_python/welcome_page.dart'; import 'package:learn_python/themes.dart'; Future main() async { WidgetsFlutterBinding.ensureInitialized(); runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { final user = UserPreferences.myUser; return ThemeProvider( initTheme: user.isDarkMode ? MyThemes.darkTheme : MyThemes.lightTheme, child: Builder( builder: (context) => MaterialApp( title: 'Python Oqy', debugShowCheckedModeBanner: false, theme: user.isDarkMode ? MyThemes.darkTheme : MyThemes.lightTheme, home: WelcomePage(), ), ), ); } } 4.1-сурет – Кіріспе терезелер Бірнеше бөлімдер мен жаңа терезелер болатын ішкі негізгі қолданба терезесі 4.2-суретте көрсетілгендей import 'package:flutter/material.dart'; import 'package:learn_python/home_page.dart'; import 'package:learn_python/nav_pages/my_page.dart'; import 'package:learn_python/nav_pages/quiz_page.dart'; class MainPage extends StatefulWidget { const MainPage({Key? key}) : super(key: key); @override _MainPageState createState() => _MainPageState(); } class _MainPageState extends State List pages = [HomePage(), QuizPage(), UserPage()]; int currentIndex = 0; void onTap(int index) { setState(() { currentIndex = index; }); } @override Widget build(BuildContext context) { return Scaffold( body: pages[currentIndex], bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, backgroundColor: Colors.transparent, onTap: onTap, currentIndex: currentIndex, selectedFontSize: 0, unselectedFontSize: 0, selectedItemColor: Colors.black87, unselectedItemColor: Colors.grey.withOpacity(0.5), showSelectedLabels: false, showUnselectedLabels: false, elevation: 0, items: const [ BottomNavigationBarItem(icon: Icon(Icons.apps), label: 'Home'), BottomNavigationBarItem( icon: Icon(Icons.quiz_rounded), label: 'Quiz'), BottomNavigationBarItem(icon: Icon(Icons.person), label: 'User') ], ), ); } } 4.2-сурет Негізгі қолданба терезесі Үшіншіден біз мобильді қосымшаға контейнерге кіру арқылы әр сабақты бөлек қара оқи аламыз 4.3-Суретте көрсетілген return Scaffold( body: CustomScrollView( slivers: [ SliverAppBar( expandedHeight: 240, flexibleSpace: FlexibleSpaceBar( background: Image.asset( 'img/header1.png', fit: BoxFit.cover, ), ), leading: IconButton( onPressed: () {}, icon: const Icon(Icons.menu), ), ), SliverGrid( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( mainAxisSpacing: 0, crossAxisCount: 1, childAspectRatio: size.width / size.height - 0.14, ), delegate: SliverChildBuilderDelegate( (BuildContext context, int index) { return Container( height: 600, padding: const EdgeInsets.only(left: 20, right: 20, top: 30), width: MediaQuery.of(context).size.width, decoration: const BoxDecoration( color: Colors.white, borderRadius: BorderRadius.only( topLeft: Radius.circular(30), topRight: Radius.circular(30), ), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ AppLargeText( text: 'Кіріспе', color: Colors.black.withOpacity(0.8), ), AppLargeText( text: 'Сабақ 1', size: 20, color: Colors.black.withOpacity(0.5)), ], ), const SizedBox(height: 10), Row( children: [ Wrap( children: List.generate(5, (index) { return Icon(Icons.star, color: index < gottenStars ? Colors.amber[300] : Colors.grey); }), ), const SizedBox(width: 6), AppText( size: 12, text: 'күрделілік деңгейі', color: Colors.black.withOpacity(0.3), ), ], ), const SizedBox(height: 35), AppLargeText( text: 'Python деген не?', color: Colors.black.withOpacity(0.8), size: 22, ), const SizedBox(height: 10), AppText(text: lessonsTextP1), Container( height: 80, decoration: const BoxDecoration( image: DecorationImage( image: AssetImage('img/lesson1_1.png'), )), ), const SizedBox(height: 15), AppText( text: '«С» да дәл осылай жұмыс істейді, бірақ жолдар аз:'), Container( height: 80, decoration: const BoxDecoration( image: DecorationImage( image: AssetImage('img/lesson1_2.png'), )), ), const SizedBox(height: 15), AppText( text: 'Python тек бір түсінікті жолды пайдаланады'), Container( height: 50, decoration: const BoxDecoration( image: DecorationImage( image: AssetImage('img/lesson1_3.png'), )), ), const SizedBox(height: 15), AppLargeText( size: 18, text: 'Python-да барлық мәселелерді шешуге арналған көптеген дайын «кітапханалар» бар'), const SizedBox(height: 10), AppText(text: lessonsTextP2), Row( children: [ const SizedBox(width: 210), ResponsiveButton( isResponsive: true, 4.3-сурет Бірінші сабақтың мәліметі Төртіншіден мобильді қосымшаға әртүрлі тестілеулерді қостым. Widget build(BuildContext context) { return ThemeSwitchingArea( child: Scaffold( body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( padding: const EdgeInsets.only(top: 42.5, left: 15), child: Row( children: [ Icon(Icons.menu, size: 30, color: Colors.black54), Expanded(child: Container()), Container( margin: const EdgeInsets.only(right: 10), width: 30, height: 30, decoration: BoxDecoration( image: DecorationImage(image: AssetImage(user.imagePath)), borderRadius: BorderRadius.circular(20), color: Colors.grey.withOpacity(0.5)), ), ], ), ), SizedBox(height: 30), Container( margin: const EdgeInsets.only(left: 20), child: AppLargeText(text: 'Python Oqy'), ), Padding( padding: const EdgeInsets.all(30.0), child: _questionIndex < _questions.length ? Quiz( answerQuestion: _answerQuestion, questionIndex: _questionIndex, questions: _questions, ) : Result(_totalScore, _resetQuiz), ), ], ), ), ); } } 4.3-сурет Тестілеу беті Әр оқушы өз прогрессін, жеке ақпаратын сақтауға мүмкіндік алу үшін жаңа бет құрылып қолданушы ақпараты сақталған. Widget buildAbout() => Container( padding: EdgeInsets.symmetric(horizontal: 20), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ const Text( 'Мен туралы', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), ), const SizedBox(height: 16), Text( user.about, style: const TextStyle(fontSize: 16, height: 1.4), ), ], ), ); 4.4-сурет Қолданушы туралы ақпараттар беті Қолданушы өзі жайлы жеке ақпаратты тек сақтауға емес және де өзгертуге мүмкіндік алу үшін жаңа бет бірнеше батырма құрылды. Widget build(BuildContext context) => ThemeSwitchingArea( child: Scaffold( appBar: AppBar( leading: BackButton( color: Colors.black, ), backgroundColor: Colors.transparent, elevation: 0, actions: [ ThemeButton(), ], ), body: ListView( padding: EdgeInsets.symmetric(horizontal: 32), physics: BouncingScrollPhysics(), children: [ const SizedBox(height: 20), ProfileWidget( imagePath: user.imagePath, isEdit: true, onClicked: () async {}, ), const SizedBox(height: 24), TextFieldWidget( label: 'Аты-жөні', text: user.name, onChanged: (name) {}, ), const SizedBox(height: 24), TextFieldWidget( label: 'Email', text: user.email, onChanged: (email) {}, ), const SizedBox(height: 24), TextFieldWidget( label: 'Мен туралы', text: user.about, maxLines: 5, onChanged: (about) {}, ), const SizedBox( height: 24, ), GestureDetector( onTap: () {}, child: ResponsiveButton( hasIcon: false, width: 120, text: 'сақтау', borderRadius: 12, ), ), ], ), ), ); } 4.5-сурет Қолданушы туралы ақпараттарды өзгертетін редакциялаушы бет import 'package:animated_theme_switcher/animated_theme_switcher.dart'; import 'package:flutter/material.dart'; import '../themes.dart'; class ThemeButton extends StatefulWidget { const ThemeButton({Key? key}) : super(key: key); @override State } class _ThemeButtonState extends State @override Widget build(BuildContext context) { return ThemeSwitcher( builder: (context) => IconButton( onPressed: () { final theme = Theme.of(context).brightness == Brightness.dark ? MyThemes.lightTheme : MyThemes.darkTheme; final switcher = ThemeSwitcher.of(context); switcher.changeTheme(theme: theme); }, icon: Icon( Icons.dark_mode_outlined, size: 30, color: Colors.black, ), ), ); } } 4.6-сурет Бағдарлама экранын қараңғы режимге өзгертетін батырма жүктеу/скачать 2,02 Mb. Достарыңызбен бөлісу:
|