需要初学者帮助 - BottomNavBar

时间:2021-01-06 03:31:00

标签: android flutter uinavigationbar android-bottomappbar

我只是在学习,无法理解某些东西。

我正在构建一个简单的应用程序,但该应用程序需要显示的第一件事是某种启动画面。 点击 SplashScreen 上唯一的按钮后,理想情况下它会加载应用程序的其余部分,但我也希望我的应用程序在底部导航栏周围工作。

我自己完成了底部导航栏,它可以工作,所以我可以在我的页面之间循环,但我的 main.dart 指向我的 Splash_Screen。在我使用的 Nav 模型中,主要指向 Nav.dart 文件。

如何让我的应用按以下顺序启动:Splash_Screen --> 当点击按钮时 --> 进入底部导航栏将导致其各自 3 个页面的位置。

提前致谢。

编辑:代码

main.dart
import 'package:flutter/material.dart';
import 'package:offroad/screens/splash_screen.dart';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SplashScreen(),
    );
  }
}

SplashScreen.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:offroad/screens/home_screen.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  Color mainColor = Color(0xFFF1330A);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/splash.jpg'),
            fit: BoxFit.cover,
          ),
        ),
        child: Container(
          color: Colors.black54,
          child: Stack(
            children: <Widget>[
              Container(),
              Positioned(
                bottom: 90,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  child: GestureDetector(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (_) => Home(),
                        ),
                      );
                    },
                    child: Container(
                      margin: EdgeInsets.symmetric(horizontal: 80),
                      height: 80,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        color: mainColor,
                      ),
                      child: Center(
                        child: Text(
                          'Entrar',
                          style: TextStyle(
                            fontSize: 25,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              Positioned(
                bottom: 230,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  child: Text(
                    'Tu mundo 4x4\n empieza aqui!',
                    style: GoogleFonts.amiri(
                      height: 1.2,
                      textStyle: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 40,
                      ),
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

一旦我的启动页面加载并点击按钮,我希望它现在进入并加载它,这是我单独工作但main.dart指向“nav.dart”

enter image description here

1 个答案:

答案 0 :(得分:0)

不确定您要实现的确切目标,但您应该使用 MaterialApp 中的路由或 onGenerateRoute 来定义您的路由。
在这种情况下,您可以摆脱 home 并将初始路由设置为 Splash Screen 并将默认路由设置为导航。
然后,您可以使用在您的路由或 onGenerateRoute 中定义的命名路由导航到您的选项卡组件。