FreekakeApp/lib/screen/koleksi_screen.dart

import 'package:flutter/material.dart';
import 'package:freekake/components/bottom_navbar.dart';
import 'package:freekake/components/buildcard_info.dart';
import 'package:freekake/components/curve_bottom_border_tab.dart';
import 'package:freekake/components/main_menu.dart';
import 'package:freekake/components/scan_button.dart';
import 'package:freekake/components/tab_menu.dart';
import 'package:freekake/components/topbar_container.dart';
import 'package:freekake/screen/collection/collection_caracter_screen.dart';
import 'package:freekake/screen/collection/collection_fragment_screen.dart';
import 'package:freekake/screen/collection/collection_skin_screen.dart';

class KoleksiScreen extends StatefulWidget {
  const KoleksiScreen({super.key});

  @override
  State<KoleksiScreen> createState() => _KoleksiScreenState();
}

class _KoleksiScreenState extends State<KoleksiScreen> {
  // static const Color transparent = Color(0xFFFFFFF);

  final PageController _pageController = PageController();
  int _selectedIndex = 0;

  void _onMenuTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    _pageController.animateToPage(
      index,
      duration: Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final buttonScanSize = screenWidth * 0.20;
    final double bottomPadding = (9000 / screenWidth).clamp(0, 0.2);
    return Scaffold(
      extendBody: true,
      body: Stack(
        children: <Widget>[
          Positioned.fill(
            child: Container(color: const Color.fromARGB(255, 255, 255, 255)),
          ),
          Positioned.fill(
            top: 30,
            child: PageView(
              controller: _pageController,
              onPageChanged: (index) {
                setState(() {
                  _selectedIndex = index;
                });
              },
              children: [
                const CollectionCaraterScreen(),
                const CollectionSkinScreen(),
                const CollectionFragmentScreen(),
              ],
            ),
          ),
          // BG MEnu
          Stack(
            children: [
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                child: SizedBox(height: 85, child: BottomNavbar()),
              ),
            ],
          ),
          //TopBar
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: SizedBox(height: 130, child: TopbarContainer()),
          ),

          Positioned(
            top: 10,
            left: 10,
            right: 10,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                BuildcardInfo(
                  icon: Icons.person,
                  text: 'User01',
                  extraIcon: Icons.emoji_events,
                  extraText: "5000",
                  width: 180,
                ),
                BuildcardInfo(
                  icon: Icons.monetization_on,
                  text: "1.300",
                  width: 90,
                ),
              ],
            ),
          ),
          // Positioned.fill(
          //   top: 30,
          //   child: PageView(
          //     controller: _pageController,
          //     onPageChanged: (index) {
          //       setState(() {
          //         _selectedIndex = index;
          //       });
          //     },
          //     children: [
          //       const CollectionCaraterScreen(),
          //       const CollectionSkinScreen(),
          //       const CollectionFragmentScreen(),
          //     ],
          //   ),
          // ),
          Positioned(
            top: 70,
            left: 10,
            right: 10,
            child: Container(
              // decoration: const BoxDecoration(
              //   borderRadius: BorderRadius.all(Radius.circular(20)),
              //   color: Color.fromARGB(116, 125, 129, 133),
              // ),
              padding: const EdgeInsets.all(1),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  CurvedBottomBorderTab(
                    label: "Karakter",
                    isSelected: _selectedIndex == 0,
                    tap: () => _onMenuTapped(0),
                  ),
                  CurvedBottomBorderTab(
                    label: "Skin",
                    isSelected: _selectedIndex == 1,
                    tap: () => _onMenuTapped(1),
                  ),
                  CurvedBottomBorderTab(
                    label: "Fragment",
                    isSelected: _selectedIndex == 2,
                    tap: () => _onMenuTapped(2),
                  ),
                ],
              ),
            ),
          ),
          Positioned(bottom: 0, left: 0, right: 0, child: MainMenu()),
          Positioned(
            bottom: bottomPadding * 98,
            left: (screenWidth - buttonScanSize) / 2,
            child: Transform.translate(
              offset: Offset(0, -20),
              child: ScanButton(),
            ),
          ),
        ],
      ),
    );
  }
}