1

Before my home screen loads I want to add a full screen overlay or even another screen so i could use it for a splash screen or sign up page, i would have just added the screen to my home parameter of my material app in my main.dart file but I had to return a scaffold for my bottom navigation to appear, so I cant just pass the screen to the home parameter which would have been my first attempt, but I need the bottom navigation but I also want to display a screen before the user sees the main home screen with the bottom navigation bar

this is my main.dart below, as you can see the home parameter of material app is returning a scaffold for my navigation bar

import 'package:flutter/material.dart';
import 'package:hotel_search/home_page.dart';
import 'package:hotel_search/splash.dart';
import 'package:flutter/services.dart';
import 'package:hotel_search/common/theme.dart';
import 'package:flutter_svg/flutter_svg.dart';






void main() {
  runApp(MyApp());
}

 

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() =>  MyAppState();
}

class  MyAppState extends State< MyApp>
    with TickerProviderStateMixin {
  // This widget is the root of your application.
  @override
  TabController _controller;
  final List<Widget> tabBarScreens = [
    HomePage(),
    Container(color: Colors.lightBlueAccent),
    Container(color: Colors.lightBlue),
    Container(color: Colors.blue),
    Container(color: Colors.blueAccent),
  ];

  @override
  void initState() {
    super.initState();
    _controller = TabController(
        initialIndex: 0, length: tabBarScreens.length, vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

    @override
  Widget build(BuildContext context) {

     SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.black.withAlpha(50),
        statusBarIconBrightness: Brightness.light));
    final themeData = HotelConceptThemeProvider.get();

    return MaterialApp(
      title: 'Hotel Search',
      debugShowCheckedModeBanner: false,
      theme: themeData,
      home: Scaffold(  // I WOULD HAVE PASSEDD IT HERE BUT I NEED THE SCAFFOLD WITH THE BOTTOM NAVIGATION BAR
        backgroundColor: themeData.scaffoldBackgroundColor,
        body: TabBarView(
          controller: _controller,
          children: tabBarScreens,
          physics: NeverScrollableScrollPhysics(),
        ),
        bottomNavigationBar: TabBar(
          controller: _controller,
          indicatorSize: TabBarIndicatorSize.label,
          indicatorColor: Colors.transparent,
          isScrollable: false,
          tabs: [
            _buildTabIcon("img/tab_bar_home.svg", 0, themeData),
            _buildTabIcon("img/tab_bar_messages.svg", 1, themeData),
            _buildTabIcon("img/tab_bar_search.svg", 2, themeData),
            _buildTabIcon("img/tab_bar_notifications.svg", 3, themeData),
            _buildTabIcon("img/tab_bar_profile.svg", 4, themeData),
          ],
          onTap: (index) {
            setState(() {});
          },
        ),
      ),
    );
  }
  
  Widget _buildTabIcon(String assetName, int index, ThemeData themeData) {
    return Tab(
      icon: SvgPicture.asset(
        assetName,
        color: index == _controller.index
            ? themeData.accentColor
            : themeData.primaryColorLight,
      ),
    );
  }
}
mac
  • 89
  • 2
  • 8
  • The widget you are looking for is either overlay or stack. – CoderUni Sep 24 '20 at 12:06
  • i used stack but i can still see the app bar and bottom navigation, how do i cover the whole screen? – mac Sep 24 '20 at 14:53
  • Does this answer your question? [How to make a full screen dialog in flutter?](https://stackoverflow.com/questions/51908187/how-to-make-a-full-screen-dialog-in-flutter) – alexandradeas Oct 08 '20 at 13:42

0 Answers0