import 'package:flutter/material.dart'; class CategoryScreen1 extends StatefulWidget { const CategoryScreen1({Key? key}) : super(key: key); @override State createState() => _CategoryScreen1State(); } class _CategoryScreen1State extends State { int _selectedIndex=0; List text=[ 'Laptop','Desktop','Component','Monitor','UPS','Phone', 'Tablet','TV','Equipment','Camera','Security','Software', 'Accessories','Gadget','AC' ]; List icon=[ Icons.laptop_mac_outlined,Icons.desktop_windows,Icons.settings_input_component, Icons.monitor,Icons.battery_6_bar_rounded,Icons.phone,Icons.tablet,Icons.tv, Icons.scanner,Icons.camera,Icons.security,Icons.camera_rear,Icons.keyboard, Icons.headphones,Icons.ac_unit ]; @override Widget build(BuildContext context) { Size screenSize =MediaQuery.of(context).size; return Scaffold( body: Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Container( //color: Colors.amber, padding: EdgeInsets.only(left: screenSize.width*.02,right: screenSize.width*.02), width: screenSize.width*.28, child: ListView.builder( itemCount: text.length, itemBuilder: (context,index){ return GestureDetector( onTap: (){ setState(() { _selectedIndex=index; }); }, child: AnimatedContainer( margin: const EdgeInsets.only(top: 5,right: 5,left: 5,bottom: 5), decoration: BoxDecoration( color: _selectedIndex==index?Colors.deepPurple:Colors.white, borderRadius: BorderRadius.circular(10), boxShadow: const [ BoxShadow( color: Colors.grey, offset: Offset(0, 0), blurRadius: 5, spreadRadius: .3 ) ] ), duration: const Duration(milliseconds: 200), child: Column( children: [ Container( margin: const EdgeInsets.only(top: 5), child: Icon(icon[index],size: 40,color: _selectedIndex==index?Colors.white:Colors.black,), ), Container( padding: const EdgeInsets.only(top: 5), margin: const EdgeInsets.only(top: 2,bottom: 5), child: Text(text[index],style: TextStyle( color: _selectedIndex==index?Colors.white:Colors.black ),), ), ], ), ), ); }), ), Visibility( visible: _selectedIndex==0, child: Container( width: screenSize.width*.69, margin: EdgeInsets.only(left: 10,top: screenSize.height*.08), height: screenSize.height, child: Column( children: [ ListTile( title:const Text('All Laptop'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Consumer Laptop'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Business Laptop'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Gaming Laptop'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Laptop Accessories'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){ } ), const Divider(thickness: 2,), ], ), ), ), Visibility( visible: _selectedIndex==1, child: Container( width: screenSize.width*.69, margin: EdgeInsets.only(left: 5,top: screenSize.height*.08), height: screenSize.height, child: Column( children: [ ListTile( title:const Text('Gaming PC'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){} ), const Divider(thickness: 2,), ListTile( title:const Text('Brand PC'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('All-in-One PC'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Mini PC'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('All Desktop PC'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ], ), ), ), SingleChildScrollView( child: Visibility( visible: _selectedIndex==2, child: Container( width: screenSize.width*.69, margin: EdgeInsets.only(left: 10,top: screenSize.height*.08), child: Column( children: [ ListTile( title:const Text('All Components'), trailing: const Icon(Icons.arrow_forward_ios), onTap: () {}), const Divider(thickness: 2,), ListTile( title:const Text('Processor'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Motherboard'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('GPU'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('RAM'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Power Supply'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Hard Disk'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('SSD'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Casing'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Optical Disk Drive'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Show All Component'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ], ), ), ), ), //index 3 Visibility( visible: _selectedIndex==3, child: Container( width: screenSize.width*.69, margin: EdgeInsets.only(left: 10,top: screenSize.height*.08), height: screenSize.height, child: Column( children: [ ListTile( title:const Text('Gaming Monitor'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Curved Monitor'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Touch Monitor'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Normal Monitor'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('All Monitor'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ], ), ), ), //index 4 Visibility( visible: _selectedIndex==4, child: Container( width: screenSize.width*.69, margin: EdgeInsets.only(left: 10,top: screenSize.height*.08), child: Column( children: [ ListTile( title:const Text('All UPS'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('UPS'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('IPS'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Voltage Stabilizer'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){;}, ), const Divider(thickness: 2,), ListTile( title:const Text('UPS Battery'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){ }, ), const Divider(thickness: 2,), ], ), ), ), //index 5 Visibility( visible: _selectedIndex==5, child: Container( width: screenSize.width*.69, margin: EdgeInsets.only(left: 10,top: screenSize.height*.08), height: screenSize.height, child: Column( children: [ ListTile( title:const Text('Show All Phone'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Android'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('IOS'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Others'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ], ), ), ), //index 6 Visibility( visible: _selectedIndex==6, child: Container( width: screenSize.width*.69, margin: EdgeInsets.only(left: 10,top: screenSize.height*.08), height: screenSize.height, child: Column( children: [ ListTile( title:const Text('Show All Tablet'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Apple'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Android'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ], ), ), ), //index 7 Visibility( visible: _selectedIndex==7, child: Container( width: screenSize.width*.69, margin: EdgeInsets.only(left: 10,top: screenSize.height*.08), height: screenSize.height, child: Column( children: [ ListTile( title:const Text('Smart TV'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Android TV'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('LED TV'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('ALL TV'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ], ), ), ), //index 8 SingleChildScrollView( child: Visibility( visible: _selectedIndex==8, child: Container( width: screenSize.width*.69, margin: EdgeInsets.only(left: 10,top: screenSize.height*.08), child: Column( children: [ ListTile( title:const Text('Show All Office Equipment'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Projector'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Printer'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){;}, ), const Divider(thickness: 2,), ListTile( title:const Text('Photocopier'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Cartridge'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Scanner'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('ID Card Printer'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Cash Drawer'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2), ListTile( title:const Text('Conference System'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2), ListTile( title:const Text('Label Printer'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2), ListTile( title:const Text('Toner'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2), ListTile( title:const Text('IP Phone'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2), ], ), ), ), ), //index 9 Visibility( visible: _selectedIndex==9, child: Container( width: screenSize.width*.69, margin: EdgeInsets.only(left: 10,top: screenSize.height*.08), height: screenSize.height, child: Column( children: [ ListTile( title:const Text('Show All Camera'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('DSLR'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Mirrorless Camera'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Action Camera'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Video Camera'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Camera Accessories'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ], ), ), ), //index 10 Visibility( visible: _selectedIndex==10, child: Container( width: screenSize.width*.69, margin: EdgeInsets.only(left: 10,top: screenSize.height*.08), height: screenSize.height, child: Column( children: [ ListTile( title:const Text('Show All'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('CCTV Camera'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Entrance Control Scanner'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('IP Camera'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Fingerprint Access Control'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ], ), ), ), //index 11 Visibility( visible: _selectedIndex==11, child: Container( width: screenSize.width*.69, margin: EdgeInsets.only(left: 10,top: screenSize.height*.08), height: screenSize.height, child: Column( children: [ ListTile( title:const Text('All Software'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Operating System'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Antivirus'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Adobe'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Office Application'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ], ), ), ), //index 12 Visibility( visible: _selectedIndex==12, child: Container( width: screenSize.width*.69, margin: EdgeInsets.only(left: 10,top: screenSize.height*.08), height: screenSize.height, child: Column( children: [ ListTile( title:const Text('All Accessories'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Mouse'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Keyboard'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Headphone'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Speaker'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Microphone'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Memory Card'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Pen Drive'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Web Cam'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ], ), ), ), //index 13 Visibility( visible: _selectedIndex==13, child: Container( width: screenSize.width*.69, margin: EdgeInsets.only(left: 10,top: screenSize.height*.08), height: screenSize.height, child: Column( children: [ ListTile( title:const Text('Smart Band'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Smart Watch'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Smart Googles'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Earbuds'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Neck Band'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Drones'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('All Gadgets'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ], ), ), ), //index 13 //index 14 Visibility( visible: _selectedIndex==14, child: Container( width: screenSize.width*.69, margin: EdgeInsets.only(left: 10,top: screenSize.height*.08), height: screenSize.height, child: Column( children: [ ListTile( title:const Text('Normal AC'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('Inverter AC'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ListTile( title:const Text('All AC'), trailing: const Icon(Icons.arrow_forward_ios), onTap: (){}, ), const Divider(thickness: 2,), ], ), ), ), ], ), ); } }