import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'feed_page.dart'; import 'following_page.dart'; import 'city_page.dart'; import 'connections_page.dart'; import 'messages_page.dart'; import 'profile_page.dart'; class SimlyssHomeScreen extends StatefulWidget { final bool isPro; const SimlyssHomeScreen({super.key, required this.isPro}); @override SimlyssHomeScreenState createState() => SimlyssHomeScreenState(); } class SimlyssHomeScreenState extends State { final List stories = [ StoryItem(icon: 'assets/icons/brainstorm.png', label: 'Ideas'), StoryItem(icon: 'assets/icons/books.png', label: 'Reading'), StoryItem(icon: 'assets/icons/fitness.png', label: 'Fitness'), StoryItem(icon: 'assets/icons/work.png', label: 'Work'), ]; final List tabs = [ TabItem(title: 'Your Feed', icon: CupertinoIcons.house_fill), TabItem(title: 'Following', icon: CupertinoIcons.person_2_fill), TabItem(title: 'In Your City', icon: CupertinoIcons.location_fill), ]; int _selectedTabIndex = 0; int _currentNavIndex = 0; final List _contentPages = [ const FeedPage(), const FollowingPage(), const CityPage(), ]; final List _navPages = [ const SizedBox(), // Placeholder for content pages const ConnectionsPage(), const MessagesPage(), const ProfilePage(), ]; @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: _buildAppBar(), body: _currentNavIndex == 0 ? _buildHomeContent() : _navPages[_currentNavIndex], bottomNavigationBar: _buildBottomNavigationBar(), floatingActionButton: _currentNavIndex == 0 ? _buildFloatingActionButton() : null, ); } AppBar _buildAppBar() { return AppBar( backgroundColor: Colors.white, elevation: 0, title: const Text( 'Simlyss', style: TextStyle( fontSize: 24, fontWeight: FontWeight.bold, color: Colors.black, fontFamily: 'Poppins', ), ), centerTitle: false, leading: null, automaticallyImplyLeading: false, actions: [ _buildNotificationButton(), _buildSearchButton(), ], ); } Widget _buildNotificationButton() { return Stack( alignment: Alignment.center, children: [ IconButton( icon: const Icon( CupertinoIcons.bell, color: Colors.black, size: 24, ), onPressed: () {}, // Notifications ), Positioned( top: 10, right: 10, child: Container( width: 10, height: 10, decoration: const BoxDecoration( color: Color(0xFFE91E63), shape: BoxShape.circle, ), ), ), ], ); } Widget _buildSearchButton() { return IconButton( icon: const Icon( CupertinoIcons.search, color: Colors.black, size: 24, ), onPressed: () {}, // Search ); } Widget _buildHomeContent() { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ _buildStoryHighlights(), _buildTabSelector(), Expanded( child: _contentPages[_selectedTabIndex], ), ], ); } Widget _buildStoryHighlights() { return Container( height: 110, padding: const EdgeInsets.symmetric(vertical: 10), decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.05), spreadRadius: 1, blurRadius: 1, offset: const Offset(0, 1), ), ], ), child: ListView.builder( scrollDirection: Axis.horizontal, padding: const EdgeInsets.symmetric(horizontal: 16), itemCount: stories.length, itemBuilder: (context, index) { return _buildStoryItem(stories[index]); }, ), ); } Widget _buildStoryItem(StoryItem story) { return Padding( padding: const EdgeInsets.symmetric(horizontal: 12), child: Column( mainAxisSize: MainAxisSize.min, children: [ Container( padding: const EdgeInsets.all(2), decoration: BoxDecoration( shape: BoxShape.circle, gradient: const LinearGradient( colors: [Color(0xFFE91E63), Color(0xFFF06292)], begin: Alignment.topLeft, end: Alignment.bottomRight, ), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.3), spreadRadius: 1, blurRadius: 4, offset: const Offset(0, 2), ), ], ), child: Container( padding: const EdgeInsets.all(2), decoration: const BoxDecoration( shape: BoxShape.circle, color: Colors.white, ), child: CircleAvatar( radius: 30, backgroundColor: Colors.grey.shade50, child: Image.asset(story.icon, width: 32, height: 32), ), ), ), const SizedBox(height: 6), Text( story.label, style: const TextStyle( fontSize: 12, fontWeight: FontWeight.w500, color: Colors.black87, ), ), ], ), ); } Widget _buildTabSelector() { return Container( height: 60, padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16), decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.05), spreadRadius: 1, blurRadius: 1, offset: const Offset(0, 1), ), ], ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: tabs.asMap().entries.map((entry) { final index = entry.key; final tab = entry.value; final isSelected = index == _selectedTabIndex; return Expanded( child: GestureDetector( onTap: () { setState(() { _selectedTabIndex = index; }); }, child: Container( margin: const EdgeInsets.symmetric(horizontal: 4), padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12), decoration: BoxDecoration( color: isSelected ? const Color(0xFFE91E63) : Colors.grey.shade100, borderRadius: BorderRadius.circular(20), boxShadow: isSelected ? [ BoxShadow( color: const Color(0xFFE91E63).withOpacity(0.3), spreadRadius: 1, blurRadius: 4, offset: const Offset(0, 2), ), ] : null, ), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( tab.icon, color: isSelected ? Colors.white : Colors.black54, size: 16, ), const SizedBox(width: 6), Text( tab.title, style: TextStyle( color: isSelected ? Colors.white : Colors.black54, fontWeight: isSelected ? FontWeight.bold : FontWeight.w500, fontSize: 13, ), ), ], ), ), ), ); }).toList(), ), ); } Widget _buildBottomNavigationBar() { return Container( decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.2), spreadRadius: 0, blurRadius: 10, offset: const Offset(0, -2), ), ], ), child: BottomNavigationBar( backgroundColor: Colors.white, selectedItemColor: const Color(0xFFE91E63), unselectedItemColor: Colors.grey.shade600, showSelectedLabels: true, showUnselectedLabels: true, type: BottomNavigationBarType.fixed, selectedLabelStyle: const TextStyle( fontSize: 12, fontWeight: FontWeight.w500, ), unselectedLabelStyle: const TextStyle( fontSize: 12, fontWeight: FontWeight.w500, ), currentIndex: _currentNavIndex, elevation: 0, onTap: (index) { setState(() { _currentNavIndex = index; }); }, items: const [ BottomNavigationBarItem( icon: Icon(CupertinoIcons.house, size: 24), activeIcon: Icon(CupertinoIcons.house_fill, size: 24), label: 'Home', ), BottomNavigationBarItem( icon: Icon(CupertinoIcons.person_2, size: 24), activeIcon: Icon(CupertinoIcons.person_2_fill, size: 24), label: 'Connections', ), BottomNavigationBarItem( icon: Icon(CupertinoIcons.chat_bubble_2, size: 24), activeIcon: Icon(CupertinoIcons.chat_bubble_2_fill, size: 24), label: 'Messages', ), BottomNavigationBarItem( icon: Icon(CupertinoIcons.person_circle, size: 24), activeIcon: Icon(CupertinoIcons.person_circle_fill, size: 24), label: 'Profile', ), ], ), ); } Widget _buildFloatingActionButton() { return FloatingActionButton( onPressed: () {}, backgroundColor: const Color(0xFFE91E63), elevation: 4, child: const Icon( Icons.add, color: Colors.white, size: 28, ), ); } } class StoryItem { final String icon; final String label; StoryItem({required this.icon, required this.label}); } class TabItem { final String title; final IconData icon; TabItem({required this.title, required this.icon}); } import 'package:flutter/material.dart'; class ConnectionsPage extends StatelessWidget { const ConnectionsPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar( backgroundColor: Colors.white, elevation: 0, title: const Text( 'Connections', style: TextStyle( fontSize: 22, fontWeight: FontWeight.bold, color: Colors.black, ), ), centerTitle: false, ), body: const Center( child: Text('Connections Page'), ), ); } } import 'package:flutter/material.dart'; class MessagesPage extends StatelessWidget { const MessagesPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar( backgroundColor: Colors.white, elevation: 0, title: const Text( 'Messages', style: TextStyle( fontSize: 22, fontWeight: FontWeight.bold, color: Colors.black, ), ), centerTitle: false, ), body: const Center( child: Text('Messages Page'), ), ); } } import 'package:flutter/material.dart'; class ProfilePage extends StatelessWidget { const ProfilePage({super.key}); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar( backgroundColor: Colors.white, elevation: 0, title: const Text( 'Profile', style: TextStyle( fontSize: 22, fontWeight: FontWeight.bold, color: Colors.black, ), ), centerTitle: false, ), body: const Center( child: Text('Profile Page'), ), ); } } import 'package:flutter/material.dart'; class AppTheme { static const Color primaryColor = Color(0xFFE91E63); static const Color secondaryColor = Color(0xFF2196F3); static const Color backgroundColor = Colors.white; static const Color textColor = Colors.black87; static const Color subtitleColor = Colors.black54; static const Color dividerColor = Color(0xFFEEEEEE); static ThemeData get lightTheme { return ThemeData( primaryColor: primaryColor, scaffoldBackgroundColor: backgroundColor, appBarTheme: const AppBarTheme( backgroundColor: backgroundColor, elevation: 0, titleTextStyle: TextStyle( color: textColor, fontSize: 24, fontWeight: FontWeight.bold, ), iconTheme: IconThemeData(color: textColor), ), textTheme: const TextTheme( displayLarge: TextStyle(color: textColor, fontWeight: FontWeight.bold), displayMedium: TextStyle(color: textColor, fontWeight: FontWeight.bold), displaySmall: TextStyle(color: textColor, fontWeight: FontWeight.bold), headlineMedium: TextStyle(color: textColor, fontWeight: FontWeight.w700), headlineSmall: TextStyle(color: textColor, fontWeight: FontWeight.w700), titleLarge: TextStyle(color: textColor, fontWeight: FontWeight.w600), bodyLarge: TextStyle(color: textColor), bodyMedium: TextStyle(color: textColor), ), colorScheme: ColorScheme.fromSwatch().copyWith( primary: primaryColor, secondary: secondaryColor, ), ); } } I've redesigned the Simlys home screen with a modern, clean aesthetic that emphasizes user engagement. The key improvements include: 1. Enhanced story highlights with labels and a gradient border 2. Redesigned tab selector with improved visual feedback 3. Polished bottom navigation bar with active/inactive icons 4. Added a floating action button for content creation 5. Improved visual hierarchy with subtle shadows and spacing 6. Created placeholder pages for all navigation destinations 7. Added a theme file for consistent styling The design now follows Material Design 3 principles while maintaining a unique brand identity through the pink accent color. The layout is more intuitive with clear visual cues for navigation.