使用底部导航栏构建可滚动页面时出现问题

时间:2019-07-03 21:42:36

标签: flutter dart

当我在页面上添加bottomNavigationBar时,页面的主体将消失。我相信该问题源于我从阅读过的其他帖子中获得的SingleChildScrollView的使用

我在底部导航栏中的何处呼叫似乎不再起作用

-homeScreen.dart
import 'package:flutter/material.dart';
import 'package:second_try/Widgets/headerHome.dart';
import 'package:second_try/Widgets/menuHome.dart';
import 'package:second_try/Widgets/businessesList.dart';

class homeScreen extends StatefulWidget {
  homeScreen({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _homeScreen createState() => _homeScreen();
}

class _homeScreen extends State<homeScreen> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(body: bodyHomePage()),
    );
  }
}

class bodyHomePage extends StatelessWidget {
  const bodyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Column(children: <Widget>[
            headerHome(),
            homeMenu(),
            businessesList(),
            businessesList(),
          ]),
        ),
        //      bottomNavigationBar: bottomNavigation(),
      ),
    );
  }
}


-------------------------------------------------------------------------------------
headerHome

import 'package:flutter/material.dart';

class headerHome extends StatelessWidget {
  const headerHome({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10.0),
      child: Container(
        height: 140,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Stack(
              alignment: Alignment.topCenter,
              children: <Widget>[
                Container(
                  height: 140,
                  color: Colors.white,
                ),
                Container(
                  height: 120,
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [
                          Colors.deepPurple,
                          Colors.deepPurpleAccent,
                        ],
                      ),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black,
                          blurRadius: 10,
                        ),
                      ]),
                ),
                Positioned(
                  top: 98,
                  child: Container(
                      width: 340,
                      height: 40,
                      decoration: BoxDecoration(
                        boxShadow: [
                          new BoxShadow(
                            color: Colors.blueGrey[900],
                            offset: new Offset(0.0, 8.0),
                            blurRadius: 20.0,
                          )
                        ],
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                        color: Colors.white,
                      ),
                      child: Row(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Expanded(
                              child: Padding(
                                padding:
                                    const EdgeInsets.only(top: 8, left: 10),
                                child: TextFormField(
                                  decoration: InputDecoration(
                                    border: InputBorder.none,
                                    hintText: "What are you looking for?",
                                    hintStyle:
                                        TextStyle(color: Colors.grey[700]),
                                  ),
                                ),
                              ),
                            ),
                            Container(
                              child: Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Align(
                                    alignment: Alignment.centerRight,
                                    child: Icon(Icons.search,
                                        color: Colors.deepPurple)),
                              ),
                            ),
                          ])),
                ),
                Container(
                  height: 100,
                  padding: EdgeInsets.only(top: 25),
                  child: Row(
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.only(left: 30),
                        height: 35,
                      /*  child: Image(
                          image: AssetImage(
                            'lib/assets/white-boardwalk-icon.png',
                          ),
                        ),*/
                      ),
                    ],
                  ),
                ),
                Container(
                  height: 100,
                  padding: EdgeInsets.only(top: 25),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: Center(
                          child: Container(
                            child: Text(
                              'Boardwalk',
                              style:
                                  TextStyle(fontSize: 30, color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}


-----------------------------------------------------------------------------------------------
businessList.dart

import 'package:flutter/material.dart';

class businessesList extends StatelessWidget {
  const businessesList({Key key}) : super(key: key);
  Padding businessCard(String category, IconData categoryIcon) {
    return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 4),
        child: Container(
          margin: EdgeInsets.only(left: 21),
          width: 200,
          child: InkWell(
            child: Column(
              children: <Widget>[
                Center(
                  child: Container(
                    height: 140,
                    width: 200,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(14)),
                      gradient: LinearGradient(
                        colors: [Colors.deepPurple, Colors.deepPurpleAccent],
                      ),
                    ),
                    child: Icon(
                      categoryIcon,
                      size: 40.0,
                      color: Colors.white,
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 12),
                  child: Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                      category,
                      style: TextStyle(
                        fontSize: 22,
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 6),
                  child: Row(
                    children: <Widget>[
                      Container(
                        alignment: Alignment.topLeft,
                        child: Icon(Icons.star, size: 16,)),
                      Container(
                          alignment: Alignment.topLeft,
                          child: Icon(Icons.star, size: 16,)),
                      Container(
                          alignment: Alignment.topLeft,
                          child: Icon(Icons.star, size: 16,)),
                      Container(
                          alignment: Alignment.topLeft,
                          child: Icon(Icons.star, size: 16,)),
                      Container(
                          alignment: Alignment.topLeft,
                          child: Icon(Icons.star, size: 16,)),
                      Padding(
                        padding: const EdgeInsets.only(left:6.0),
                        child: Text(
                          '(356)',
                          style: TextStyle(
                            fontSize: 14,
                          ),
                        ),
                      ),


                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 6),
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      'Sed ut perspiciatis unde omnis iste natus error sit',
                      style: TextStyle(
                        fontSize: 16,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 5.0),
      child: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(top: 6, bottom: 12.0),
            child: Container(
              height: 40,
              child: Row(
                children: <Widget>[
                  Container(
                      margin: EdgeInsets.only(left: 35),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        'List Header',
                        style: TextStyle(fontSize: 24),
                      )),
                  Expanded(
                    child: SizedBox(),
                  ),
                  Container(
                      margin: EdgeInsets.only(right: 35),
                      alignment: Alignment.centerRight,
                      child: Text(
                        'View All',
                        style: TextStyle(fontSize: 16),
                      ))
                ],
              ),
            ),
          ),
          Container(
            height: 260,
            width: 400,
            child:
                ListView(scrollDirection: Axis.horizontal, children: <Widget>[
              businessCard('Home', Icons.home),
              businessCard('Eat', Icons.restaurant_menu),
              businessCard('Shop', Icons.store),
              businessCard('Travel', Icons.airplanemode_active),
              businessCard('Play', Icons.local_activity),
              businessCard('Service', Icons.business),
            ]),
          ),
        ],
      ),
    );
  }

--------------------------------------------------------------------------------
bottomNavigation.dart

import 'package:flutter/material.dart';

class bottomNavigation extends StatelessWidget {
  const bottomNavigation ({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: 1,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up,), title: Text("GLO",
              style: TextStyle(color: Colors.black),),),
            BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title:
            Text("MTN"),),
            BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title:
            Text("Airtel"),),
            BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title:
            Text("Airtel"),),
          ],
        ),
      ),
    );
  }
}

I am expecting both the Pages Screen and the navigation bar to be view-able but the two are not working together at the moment

我没有收到任何错误消息

1 个答案:

答案 0 :(得分:0)

_homeScreen,bodyHomePage和bottomNavigation构建方法返回MaterialApp-您只需要一个MaterialApp,在_homeScreen中,其余应该是小部件。 – 7分钟前的Melquiades

感谢您的快速帮助。如果我要在原始页面之外构建组件,则我需要致电MaterialApp。感谢您的快速修复!几天前才开始使用flutter

相关问题