شرح إنشاء تطبيق إخباري بأسخدام Apis في flutter بسهوله ( انشاء Bottom navigation with cubit )
في هذا الجزء سوف نقوم بشرح معكم إنشاء تطبيق NewsApp بشكل مبسط بإستخدام تقنية Flutter حيث قمنا معكم سابقا بعمل هذا التطبيق في Android لكي نوضح لكم فكرة التعامل مع الapis وفي هذا المقال سوف نقوم بنفس العمل ولكن بإستخدام تقنية فلاتر وهي من التقنيات التي ظهرت حديثها والتي اصبحت مصدر دخل لكثير من الشباب واصبح الاقبال عليها كبير جدا ونحن هنا سوف نساعدكم في بناء تطبيق اخباري بإستخدام الapis بكل سهولة , في هذة المقالة سوف نقوم بعمل شريط سفلي للتنقل بين الاخبار بسهوله باستخدام الكيوبت وهذا قمنا بشر
حه سابقا لكم .
هل تريد تطوير تطبيقات الجوال سواء كانت تعمل بنظام اندرويد او اي او اس بكود واحد , قديما كان هذا الامر صعب جدا ولكن مع تطور التكنولوجيا وظهور لغات برمجه مختلفه وتقنيات مختلفة اصبح هذا الامر طبيعي وسهل يوجد كثير من اللغات حاليا اصبحت. تطور لنا تطبيقات بكود واحد ليس فقط بتقنية فلاتر ولكن يوجد لغات اخرى ولكن هل سالت نفسك لماذا يتجه الاغلب الى flutter عكس غيرها رغم انه يوجد لغه اخرى تقوم بنفس الوظيفه قريبا. الامر بكل بساطه وهو ان تقنية فلاتر من تطوير العملاق جوجل وكما نعلم ان شركة google دائما تسعى الى تطوير لغات برمجه قويه جدا. و تسهل على المطورين العمل من خلال الاضافات والتحديثات التي يقومون بها باستمرار في المشاريع الخاصه بهم سواء في لغات البرمجه او في اي شيء اخر. ايضا تقنية فلاتر لغه بسيطه جدا وهي تعمل بلغه تسمى دارت.
الملفات التي سوف نعمل عليها في درس اليوم
محتويات ملف states
في هذا الجزء نقوم بعمل الflag الذي نريده مثلا نريد التبديل بين النوافذ و الاخبار وايضا نريد عمل الcubit عند بدء تشغيل التطبيق لذلك سوف نضع كل السابق في ملف NewsStates
states.dart
abstract class NewsStates {}
class NewsInitialState extends NewsStates {}
class NewsBottomNavState extends NewsStates {}
محتويات ملف cubit
في هذا الملف نكتب الكود الذي نريده وهنا سوف نضع متغير باسم currentIndex ويبدء من القيمة 0 وايضا سوف نضع قائمة تحتوي على الBottomNavigationBarItem و الWidget
cubit.dart
class NewsCubit extends Cubit<NewsStates> {
NewsCubit() : super(NewsInitialState());
static NewsCubit get(context) => BlocProvider.of(context);
int currentIndex = 0;
List<BottomNavigationBarItem> listBottomIndex = [
BottomNavigationBarItem(
icon: Icon(Icons.business_sharp),
label: 'Business'
),
BottomNavigationBarItem(
icon: Icon(Icons.sports_baseball),
label: 'Sports'
),
BottomNavigationBarItem(
icon: Icon(Icons.science),
label: 'Science'
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings'
),
];
List<Widget> screen = [
Business(),
Sports(),
Science(),
Settings(),
];
void changeBottomNav(int index) {
currentIndex = index;
emit(NewsBottomNavState());
}
}
محتويات ال Run Home
في هذا الملف والذي سوف يكون باسم Main سوف نقوم بتشغيل الكود وتعديل الثيم الخاص به وهنا سوف نقوم بتشغيل News_layout.
Main.dart
class MyApp extends StatelessWidget {
@override
Widget build(Object context) {
return MaterialApp(
// delete debug in app
debugShowCheckedModeBanner: false,
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
appBarTheme: AppBarTheme(
iconTheme: IconThemeData(
color: Colors.black54
),
// سماح بتغيير لون الشريط العلوي
backwardsCompatibility: false,
systemOverlayStyle: SystemUiOverlayStyle(
// لون شريط الايقونات
statusBarColor: Colors.white,
// لون الايقونات
statusBarIconBrightness : Brightness.dark
),
titleTextStyle: TextStyle(color: Colors.black , fontSize: 18.0 , fontWeight: FontWeight.bold),
backgroundColor: Colors.white,
elevation: 1.0,
),
bottomNavigationBarTheme: BottomNavigationBarThemeData(
type: BottomNavigationBarType.fixed,
elevation: 20.0,
selectedItemColor: Colors.deepOrange,
),
),
home: News_layout()
);
}
}
محتويات ملف News_layout
اخيرا سوف نقوم بتشغيل الكود السابق كاملا داخل صفحة الNews_layout وبما ان هذة الصفحة هي التي سوف تقوم بتشغيل باقي الصفحات سوف تكون BlocProvider لان الBlocProvider يستدعى مره واحده في التطبيق كامل ويمكنك تشغيل اكثر من واحد ولكن سوف تجعلها multi ونضع الBlocProvider الذين تريدهم يعملون في البداية ولكن لن نحتاج الى هذا الان .
News_layout.dart
Widget build(BuildContext context) {
return BlocProvider(
create: (BuildContext context) => NewsCubit(),
child: BlocConsumer<NewsCubit , NewsStates>(
listener: (context , state) {},
builder: (context , state) {
var cubit = NewsCubit.get(context);
return Scaffold(
appBar: AppBar(
title: Text('News App'),
actions: [
IconButton(onPressed: (){}, icon: Icon(Icons.search))
],
),
body: cubit.screen[cubit.currentIndex],
bottomNavigationBar:
BottomNavigationBar(
currentIndex: cubit.currentIndex,
onTap: (index) { cubit.changeBottomNav(index); } ,
items: cubit.listBottomIndex,
),
);
},
),
);
}
لمزيد من الاكواد والشروحات في الflutter وتطوير تطبيقات الجوال يمنكم تصفح الموقع والتمتع بتعلم باقي المقالات والاستفاده منها بشكل قوي ومبسط وايضا مجاني.
