ホームページのコードをチラ見せ

こんにちは！今日もお疲れ様です！

今日も渋谷でずっとバイトしてます笑

早く脱バイトできるようになりたいな〜脱バイトモチベをバイトをして高めてるのなんか面白いですよね笑

今日は、アプリのホーム画面のコードをお見せしようと思います！早速ですが、ホームページのUIはこんな感じ↓

（昨日と同じ画像使いました）

コードはこんな感じ↓

@override
 Widget build(BuildContext context) {
   double _w = MediaQuery.of(context).size.width;

   return Scaffold(
     backgroundColor: Provider.of<MyTheme>(context, listen: false).checkMode()
         ? Colors.black45
         : Colors.transparent,
     body: Stack(
       children: [
         /// ListView
         ListView(
           physics:
               BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
           children: [
             homePageCardsGroup(
               Colors.blue,
               Icons.analytics_outlined,
               'プロフィール',
               context,
               ProfilePage(),
               Colors.red,
               Icons.leaderboard_outlined,
               'ランキング',
               RankingsPage(),
             ),
             homePageCardsGroup(
               Colors.green,
               Icons.article_sharp,
               'テスト',
               context,
               MathTestList(),
               Colors.purple,
               Icons.help_outline_outlined,
               'クイズ',
               QuizHome(),
             ),
             homePageCardsGroup(
               Colors.blueGrey,
               Icons.feed_outlined,
               'ニュース',
               context,
               NewsPage(),
               Colors.blue,
               Icons.school_outlined,
               '家庭教師',
               TeacherHome(),
             ),
           ],
         ),

         /// SETTING ICON
         Padding(
           padding: EdgeInsets.fromLTRB(0, _w / 9.5, _w / 15, 0),
           child: Row(
             mainAxisAlignment: MainAxisAlignment.end,
             children: [
               InkWell(
                 highlightColor: Colors.transparent,
                 splashColor: Colors.transparent,
                 onTap: () {
                   HapticFeedback.lightImpact();
                   Navigator.push(
                     context,
                     MaterialPageRoute(
                       builder: (context) {
                         return SettingsPage();
                       },
                     ),
                   );
                 },
                 child: ClipRRect(
                   borderRadius: BorderRadius.all(Radius.circular(99)),
                   child: BackdropFilter(
                     filter: ImageFilter.blur(sigmaY: 5, sigmaX: 5),
                     child: Container(
                       height: _w / 8.5,
                       width: _w / 8.5,
                       decoration: BoxDecoration(
                         color: Colors.black.withOpacity(.05),
                         shape: BoxShape.circle,
                       ),
                       child: Center(
                         child: Icon(
                           Icons.settings,
                           size: _w / 17,
                           //  color: Colors.black.withOpacity(.6),
                         ),
                       ),
                     ),
                   ),
                 ),
               ),
             ],
           ),
         ),
       ],
     ),
   );
 }

  Widget homePageCardsGroup(
     Color color,
     IconData icon,
     String title,
     BuildContext context,
     Widget route,
     Color color2,
     IconData icon2,
     String title2,
     Widget route2) {
   double _w = MediaQuery.of(context).size.width;
   return Padding(
     padding: EdgeInsets.only(bottom: _w / 17),
     child: Row(
       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
       children: [
         homePageCard(color, icon, title, context, route),
         homePageCard(color2, icon2, title2, context, route2),
       ],
     ),
   );
 }

Widget homePageCard(Color color, IconData icon, String title,
     BuildContext context, Widget route) {
   double _w = MediaQuery.of(context).size.width;
   return Opacity(
     opacity: _animation.value,
     child: Transform.translate(
       offset: Offset(0, _animation2.value),
       child: InkWell(
         highlightColor: Colors.transparent,
         splashColor: Colors.transparent,
         onTap: () {
           HapticFeedback.lightImpact();
           Navigator.push(
             context,
             MaterialPageRoute(
               builder: (context) {
                 return route;
               },
             ),
           );
         },
         child: Container(
           padding: EdgeInsets.all(15),
           height: _w / 2,
           width: _w / 2.4,
           decoration: BoxDecoration(
             color: Provider.of<MyTheme>(context, listen: false).checkMode()
                 ? Colors.black45
                 : Colors.white,
             boxShadow: [
               BoxShadow(
                 color: Color(0xff040039).withOpacity(.15),
                 blurRadius: 99,
               ),
               BoxShadow(
                 color: color.withAlpha(60),
                 blurRadius: 10.0,
                 spreadRadius: 0.0,
                 offset: Offset(
                   0.0,
                   3.0,
                 ),
               ),
             ],
             border: Border.all(
               width: 3,
               color: color.withOpacity(.1),
             ),
             borderRadius: BorderRadius.all(
               Radius.circular(25),
             ),
           ),
           child: Column(
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
             children: [
               SizedBox(),
               Container(
                 height: _w / 8,
                 width: _w / 8,
                 decoration: BoxDecoration(
                   color: color.withOpacity(.1),
                   shape: BoxShape.circle,
                 ),
                 child: Icon(
                   icon,
                   color: color.withOpacity(.6),
                 ),
               ),
               Text(
                 title,
                 maxLines: 4,
                 softWrap: true,
                 overflow: TextOverflow.ellipsis,
                 style: TextStyle(
                   fontSize: 18,
                   color:
                       Provider.of<MyTheme>(context, listen: false).checkMode()
                           ? color.withOpacity(.6)
                           : color.withOpacity(.5),
                   fontWeight: FontWeight.w700,
                 ),
                 textAlign: TextAlign.center,
               ),
               SizedBox(),
             ],
           ),
         ),
       ),
     ),
   );
 }

こんな感じで大量のコードを書きました笑

アプリ開発を頑張っている方々に役立ったらいいななんて思ってます！引き続き頑張っていきます！

それではまた明日！