I'm learning Flutter now and I'm not very handy yet. I have this problem: basically I have created more screens and I can navigate through them thanks to a "bottomNavigationBar". Now the problem is I just don't know how to put an image and text on the Home screen but at the same time leave the icons on the other screens. I'm doing a project and now I need to do this thing.
I also need to know how to adjust this image (https://images.unsplash.com/photo-1604357209793-fca5dca89f97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWFwfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60") to the screen so that it stays between the AppBar and the bottomNavigationBar. (I now how to add images, I only need to know can it be fitted in the way I want).
(I leave here all the code that I written until now).
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Start Pages';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: StartPages(),
);
}
}
class StartPages extends StatefulWidget {
const StartPages({super.key});
@override
State<StartPages> createState() => StartPagesState();
}
class StartPagesState extends State<StartPages> {
int _selectedIndex = 2;
//static const TextStyle optionStyle =
//TextStyle(fontSize: 30, fontWeight: FontWeight.bold, color: Colors.white);
static const List<Widget> _widgetOptions = <Widget>[
Icon(
Icons.calendar_month,
size:150,
color: Colors.white,
),
Icon(
Icons.location_on,
size:150,
color: Colors.white,
),
Image(
image: NetworkImage('https://images.unsplash.com/photo-1604357209793-fca5dca89f97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWFwfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'),
),
Icon(
Icons.group,
size:150,
color: Colors.white,
),
Icon(
Icons.groups,
size:150,
color: Colors.white,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('FindASpot'),
backgroundColor: Colors.grey[900],
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
backgroundColor: Colors.grey[700],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.shifting,
selectedIconTheme: IconThemeData(color: Colors.amberAccent),
selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
selectedItemColor: Colors.amberAccent,
items: const <BottomNavigationBarItem>[BottomNavigationBarItem(
icon: Icon(Icons.calendar_month),
label: 'Events',
backgroundColor: Colors.black45,
),
BottomNavigationBarItem(
icon: Icon(Icons.location_on),
label: 'Map',
backgroundColor: Colors.black45,
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
backgroundColor: Colors.black45,
),
BottomNavigationBarItem(
icon: Icon(Icons.group),
label: 'Friends',
backgroundColor: Colors.black45,
),
BottomNavigationBarItem(
icon: Icon(Icons.groups),
label: 'Groups',
backgroundColor: Colors.black45,
),
],
currentIndex: _selectedIndex,
//selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}