I'm getting this overflow error because of the bottom widget of the app bar.
是否可以更改底部小部件的高度？提前谢谢。
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
@override
_State createState() {
return new _State();
}
}
class _Page {
const _Page({ this.icon, this.text });
final IconData icon;
final String text;
}
const List<_Page> _allPages = const <_Page>[
const _Page(icon: Icons.grade, text: 'TRIUMPH'),
const _Page(icon: Icons.playlist_add, text: 'NOTE'),
const _Page(icon: Icons.check_circle, text: 'SUCCESS'),
const _Page(icon: Icons.question_answer, text: 'OVERSTATE'),
const _Page(icon: Icons.sentiment_very_satisfied, text: 'SATISFACTION'),
const _Page(icon: Icons.camera, text: 'APERTURE'),
const _Page(icon: Icons.assignment_late, text: 'WE MUST'),
const _Page(icon: Icons.assignment_turned_in, text: 'WE CAN'),
];
class _State extends State<Home> with SingleTickerProviderStateMixin {
Widget _displayGalleryOne, _topIcons, _locationGallery;
TabController _controller;
bool _customIndicator = false;
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
void initState() {
_displayGalleryOne = new DisplayGalleryOne();
_locationGallery = new LocationGallery();
_topIcons = new TopIcons();
_controller = new TabController(vsync: this, length: _allPages.length);
super.initState();
}
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
return new Scaffold(
floatingActionButton: new FloatingActionButton(
onPressed: (){search();},
child: new Icon(Icons.search),
backgroundColor: Constants.primaryColor,
),
appBar: new AppBar(
iconTheme: new IconThemeData(
color: Constants.primaryColor
),
elevation: 8.0,
centerTitle: true,
backgroundColor: Colors.white,
title: new Text(
'Ladakh Navigator'.toUpperCase(),
style: new TextStyle(
fontSize: Constants.title_font_size,
fontWeight: FontWeight.w600,
color: Theme.of(context).primaryColor
),
),
这是我希望改变其高度的底部小部件。另外，我想使用标签栏更像导航栏。所以我没有使用“icon”，而是使用“IconButton”，因为溢出正在出现。
bottom: new PreferredSize(
child: new Center(
child: new TabBar(
indicatorColor: Colors.transparent,
labelColor: Constants.primaryColor,
controller: _controller,
isScrollable: true,
labelStyle: new TextStyle(
fontWeight: FontWeight.w600
),
tabs: _allPages.map((_Page page) {
return new Tab(text: page.text, icon: new IconButton(icon: new Icon(page.icon, color: Constants.primaryColor, size: 30.0,), onPressed: null));
}).toList(),
),
),
preferredSize: new Size.fromHeight(70.0)
),
),
body: new Container(
child: new LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: new ConstrainedBox(
constraints: new BoxConstraints(
minHeight: viewportConstraints.maxHeight,
),
child: new IntrinsicHeight(
child: new Column(
children: <Widget>[
/*new Container(
height: 90.0,
padding: const EdgeInsets.only(left: 10.0),
child: new SlidingWidget(_topIcons),
),
new Divider(
height: 5.0,
color: Theme.of(context).dividerColor,
),*/
new Container(
padding: const EdgeInsets.only(top: 40.0, left: 20.0),
width: double.infinity,
child: new Text(
'top destinations'.toUpperCase(),
style: new TextStyle(
fontWeight: FontWeight.w600,
fontSize: 16.0
),
textAlign: TextAlign.left,
),
),
new Container(
padding: const EdgeInsets.only(top: 5.0, bottom: 10.0),
child: new Container(
height: 240.0,
child: new SlidingWidget(_locationGallery),
),
),
new Container(
height: 180.0,
padding: const EdgeInsets.only(top: 10.0, left: 10.0, right: 10.0, bottom: 10.0),
child: new OfferCard(Color(0xFF1976d2)),
),
new Container(
padding: const EdgeInsets.only(top: 30.0, left: 20.0),
width: double.infinity,
child: new Text(
'popular hotels'.toUpperCase(),
style: new TextStyle(
fontWeight: FontWeight.w600,
fontSize: 16.0
),
textAlign: TextAlign.left,
),
),
new Container(
padding: const EdgeInsets.only(top: 5.0, bottom: 0.0),
height: 280.0,
child: new SlidingWidget(_displayGalleryOne),
),
new Container(
padding: const EdgeInsets.only(top: 0.0, left: 10.0, right: 10.0, bottom: 10.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Container(
width: width * .47,
padding: const EdgeInsets.only(right: 5.0),
child: new OfferCard(Color(0xFFF44336)),
),
new Container(
width: width * .47,
padding: const EdgeInsets.only(left: 5.0),
child: new OfferCard(Color(0xFFFFC107)),
),
],
),
),
new Container(
padding: const EdgeInsets.only(top: 40.0, left: 20.0),
width: double.infinity,
child: new Text(
'famous restaurants'.toUpperCase(),
style: new TextStyle(
fontWeight: FontWeight.w600,
fontSize: 16.0
),
textAlign: TextAlign.left,
),
),
new Container(
padding: const EdgeInsets.only(top: 5.0, bottom: 20.0),
height: 280.0,
child: new SlidingWidget(_displayGalleryOne),
),
new Container(
padding: const EdgeInsets.only(top: 10.0, left: 20.0),
width: double.infinity,
child: new Text(
'top adventures'.toUpperCase(),
style: new TextStyle(
fontWeight: FontWeight.w600,
fontSize: 16.0
),
textAlign: TextAlign.left,
),
),
new Container(
padding: const EdgeInsets.only(top: 5.0, bottom: 20.0),
height: 280.0,
child: new SlidingWidget(_displayGalleryOne),
),
],
),
),
),
);
},
),
)
);
}
}
答案 0 :(得分：1)
似乎有种bug。您可以使用 Column with children instead of Tab 进行解决。它对我来说很好。
new Scaffold(
appBar: new AppBar(
title: new Text('Network Demo'),
bottom: new TabBar(
indicatorColor: Colors.transparent,
controller: controller,
tabs: [
new Column(
children: <Widget>[
new IconButton(icon: Icon(Icons.star), onPressed: null),
new Text('Star'),
],
),new Column(
children: <Widget>[
new IconButton(icon: Icon(Icons.playlist_add), onPressed: null),
new Text('Add'),
],
),new Column(
children: <Widget>[
new IconButton(icon: Icon(Icons.done), onPressed: null),
new Text('Done'),
],
),new Column(
children: <Widget>[
new IconButton(icon: Icon(Icons.chat), onPressed: null),
new Text('Chat'),
],
),
],
),
),
body: new Center(
child: new Wrap(
children: <Widget>[
new TextFormField(
maxLines: null,
keyboardType: TextInputType.multiline,
decoration: new InputDecoration(hintText: 'Enter message'),
),
],
),
),
);
答案 1 :(得分：0)
对于底部高度，您可以轻松更改其高度和项目：
Scaffold(
/*This is Floating Action Button*/
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.camera_alt), onPressed: scan),
/*This is the bottom navigation bar*/
bottomNavigationBar: BottomAppBar(
hasNotch: true, /*Creates a notch*/
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
/*Add the Items here*/
Container(
/*Padding changes the height*/
padding: EdgeInsets.all(20.0),
child: new Icon(Icons.camera),
)
],
),
),
)