Travel app ui
Last updated
Last updated
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:whatsapp/presentation/screens/main_screen.dart';
class SplashScreen extends StatelessWidget {
const SplashScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/backgroundImage.png'),
fit: BoxFit.fill,
),
),
child: Padding(
padding: const EdgeInsets.only(left: 32, right: 32, bottom: 48),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 93),
Center(
child: Text(
'Aspen',
style: GoogleFonts.abyssinicaSil(
fontSize: 116,
color: Colors.white,
),
),
),
Spacer(),
Text(
'Plan your',
style: GoogleFonts.montserrat(
fontSize: 24,
color: Colors.white,
),
),
Text(
'Luxiroius\nVacation',
style: GoogleFonts.montserrat(
fontSize: 40,
color: Colors.white,
),
),
SizedBox(height: 24),
ElevatedButton(
style: ElevatedButton.styleFrom(
minimumSize: Size(double.infinity, 52),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
backgroundColor: Color(0xFF176FF2),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MainScreen()),
);
},
child: Text(
'Explore',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
),
),
),
);
}
}import 'package:flutter/material.dart';
class MainScreen extends StatefulWidget {
const MainScreen({super.key});
@override
State<MainScreen> createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
List<Widget> screens = [
FirstScreen(),
SecondScreen(),
ThirdScreen(),
FourthScreen(),
];
int select = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(child: screens[select]),
bottomNavigationBar: BottomNavigationBar(
currentIndex: select,
backgroundColor: Colors.white,
type: BottomNavigationBarType.fixed,
selectedItemColor: Color(0xFF176FF2),
unselectedItemColor: Color(0xFFB8B8B8),
onTap: (int index) {
setState(() {
select = index;
});
},
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: ''),
BottomNavigationBarItem(
icon: Icon(Icons.airplane_ticket_outlined),
label: '',
),
BottomNavigationBarItem(icon: Icon(Icons.favorite_border), label: ''),
BottomNavigationBarItem(icon: Icon(Icons.person_outline), label: ''),
],
),
);
}
}
class FirstScreen extends StatelessWidget {
const FirstScreen({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: [Container(height: 100, width: 100, color: Colors.red)],
);
}
}
class SecondScreen extends StatelessWidget {
const SecondScreen({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: [Container(height: 100, width: 100, color: Colors.green)],
);
}
}
class ThirdScreen extends StatelessWidget {
const ThirdScreen({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: [Container(height: 100, width: 100, color: Colors.yellow)],
);
}
}
class FourthScreen extends StatelessWidget {
const FourthScreen({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: [Container(height: 100, width: 100, color: Colors.deepPurple)],
);
}
}