diff --git a/lib/components/curve_bottom_border_tab.dart b/lib/components/curve_bottom_border_tab.dart new file mode 100644 index 0000000..84d2dac --- /dev/null +++ b/lib/components/curve_bottom_border_tab.dart @@ -0,0 +1,67 @@ +import 'package:flutter/material.dart'; + +class CurvedBottomBorderTab extends StatelessWidget { + final bool isSelected; + final String label; + final VoidCallback tap; + + const CurvedBottomBorderTab({ + required this.isSelected, + required this.label, + required this.tap, + }); + + @override + Widget build(BuildContext context) { + return CustomPaint( + painter: isSelected ? CurvedBottomPainter() : null, + child: GestureDetector( + child: Container( + width: 110, + padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16), + color: Colors.transparent, + child: Center( + child: Text( + label, + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, + color: + isSelected + ? const Color.fromARGB(255, 255, 255, 255) + : const Color.fromARGB(255, 197, 194, 194), + ), + ), + ), + ), + onTap: tap, + ), + ); + } +} + +class CurvedBottomPainter extends CustomPainter { + @override + void paint(Canvas canvas, Size size) { + final paint = + Paint() + ..color = Colors.white + ..strokeWidth = 2 + ..style = PaintingStyle.stroke; + + final path = + Path() + ..moveTo(0, size.height) + ..quadraticBezierTo( + size.width / 2, + size.height - 8, + size.width, + size.height, + ); + + canvas.drawPath(path, paint); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => false; +} diff --git a/lib/components/tab_menu.dart b/lib/components/tab_menu.dart index 02f51ab..31800ec 100644 --- a/lib/components/tab_menu.dart +++ b/lib/components/tab_menu.dart @@ -28,7 +28,7 @@ class TabMenuButton extends StatelessWidget { height: 20, colorFilter: ColorFilter.mode( isSelected - ? const Color.fromARGB(255, 106, 24, 207) + ? const Color.fromARGB(255, 10, 144, 16) : Colors.white, BlendMode.srcIn, ), @@ -43,13 +43,16 @@ class TabMenuButton extends StatelessWidget { decoration: BoxDecoration( color: isSelected - ? const Color.fromARGB(255, 199, 204, 212).withOpacity(0) - : Colors.transparent, + ? const Color.fromARGB(255, 10, 144, 16).withOpacity(0) + : const Color.fromARGB(0, 0, 0, 0), border: isSelected ? const Border( - top: BorderSide(color: Colors.white, width: 2), + bottom: BorderSide( + color: Color.fromARGB(255, 255, 255, 255), + width: 2, + ), ) : null, // borderRadius: BorderRadius.circular(20), @@ -63,7 +66,7 @@ class TabMenuButton extends StatelessWidget { color: isSelected ? const Color.fromARGB(255, 255, 255, 255) - : const Color.fromARGB(255, 0, 0, 0), + : const Color.fromARGB(255, 197, 194, 194), ), ), ), diff --git a/lib/screen/Home_screen.dart b/lib/screen/Home_screen.dart index bed443f..c97cb81 100644 --- a/lib/screen/Home_screen.dart +++ b/lib/screen/Home_screen.dart @@ -222,7 +222,6 @@ class _HomeScreenState extends State { ), SizedBox(height: 10), setHomeImage("assets/images/luffy.png", 300), - // Image.asset("images/luffy.png", width: 300), ], ), ), diff --git a/lib/screen/koleksi_screen.dart b/lib/screen/koleksi_screen.dart index d36a597..4bd53a9 100644 --- a/lib/screen/koleksi_screen.dart +++ b/lib/screen/koleksi_screen.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:furibase/components/bottom_navbar.dart'; import 'package:furibase/components/buildcard_info.dart'; +import 'package:furibase/components/curve_bottom_border_tab.dart'; import 'package:furibase/components/main_menu.dart'; import 'package:furibase/components/scan_button.dart'; import 'package:furibase/components/tab_menu.dart'; @@ -128,20 +129,20 @@ class _KoleksiScreenState extends State { child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ - TabMenuButton( + CurvedBottomBorderTab( label: "Karakter", isSelected: _selectedIndex == 0, - onPress: () => _onMenuTapped(0), + tap: () => _onMenuTapped(0), ), - TabMenuButton( + CurvedBottomBorderTab( label: "Skin", isSelected: _selectedIndex == 1, - onPress: () => _onMenuTapped(1), + tap: () => _onMenuTapped(1), ), - TabMenuButton( + CurvedBottomBorderTab( label: "Fragment", isSelected: _selectedIndex == 2, - onPress: () => _onMenuTapped(2), + tap: () => _onMenuTapped(2), ), ], ), diff --git a/lib/screen/saya/akun_saya.dart b/lib/screen/saya/akun_saya.dart index 908db96..0b36bc6 100644 --- a/lib/screen/saya/akun_saya.dart +++ b/lib/screen/saya/akun_saya.dart @@ -53,15 +53,14 @@ class _AkunSayaState extends State { title: Text("Saya"), backgroundColor: Color.fromARGB(225, 79, 76, 182), ), + resizeToAvoidBottomInset: false, backgroundColor: const Color.fromARGB(255, 255, 255, 255), body: Stack( children: [ - Positioned( - bottom: 0, - left: 0, - right: 0, + Align( + alignment: Alignment.bottomCenter, child: Padding( - padding: const EdgeInsets.only(top: 20.0, left: 20, right: 20), + padding: const EdgeInsets.only(top: 0.0, left: 20, right: 20), child: Container( height: MediaQuery.of(context).size.height * 0.7, width: MediaQuery.of(context).size.width, @@ -90,7 +89,7 @@ class _AkunSayaState extends State { ), ), ), - SizedBox(height: 40), + SizedBox(height: 70), Expanded( child: Padding( padding: EdgeInsets.all(20),