tab menu color

This commit is contained in:
='fauz 2025-04-15 13:38:24 +07:00
parent 3bc40dd46e
commit 831bf02a5c
5 changed files with 87 additions and 18 deletions

View File

@ -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;
}

View File

@ -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),
),
),
),

View File

@ -222,7 +222,6 @@ class _HomeScreenState extends State<HomeScreen> {
),
SizedBox(height: 10),
setHomeImage("assets/images/luffy.png", 300),
// Image.asset("images/luffy.png", width: 300),
],
),
),

View File

@ -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<KoleksiScreen> {
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),
),
],
),

View File

@ -53,15 +53,14 @@ class _AkunSayaState extends State<AkunSaya> {
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<AkunSaya> {
),
),
),
SizedBox(height: 40),
SizedBox(height: 70),
Expanded(
child: Padding(
padding: EdgeInsets.all(20),