0

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,
      ),
    );
  }
}

andrewJames
  • 19,570
  • 8
  • 19
  • 51

0 Answers0