フラッターPageViewを列または行内に配置するにはどうすればよいですか？実行すると、以下のエラーが発生します
これはエラーです：
I/flutter（736）：Rレンダリングライブラリによって例外が発生しました╞══════════════════════════════════ ═══════════════════════I/flutter（736）：performResize（）の実行中に次のアサーションがスローされました：I/flutter（736）：水平ビューポートが無限の高さを与えられます。 I /フラッター（736）：ビューポートは交差軸で拡大してコンテナーを塗りつぶし、子をI /フラッター（736）：交差軸での範囲に一致するように制限します。この場合、水平ビューポートには無制限の量のI /フラッター（736）、つまり拡張する垂直スペースが与えられました。
これはコードです：
import 'package:flutter/material.Dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'PayMart',
theme: new ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or press Run > Flutter Hot Reload in IntelliJ). Notice that the
// counter didn't reset back to zero; the application is not restarted.
primaryColor: Colors.blue,
primaryColorDark:Colors.blueAccent ,
accentColor: Colors.blue,
),
home: new MyTabs(),
);
}
}
class MyTabs extends StatefulWidget{
@override
MyTabsState createState() => new MyTabsState();
}
class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {
int _index;
PageController _pageController;
@override
void initState() {
// TODO: implement initState
super.initState();
_index = 0;
_pageController = new PageController(initialPage: 0,viewportFraction: 1.0);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text("PayMart"),
actions: <Widget>[
new FlatButton(onPressed: null, child: new Text("R247.50",style: new TextStyle(color: Colors.white,decorationStyle: TextDecorationStyle.wavy),)),
//new IconButton(icon: new Icon(null, color: Colors.white), onPressed: null),
new IconButton(icon: new Icon(Icons.add_circle_outline,color: Colors.white), onPressed: null)
],
centerTitle: false,
),
drawer: new Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the Drawer if there isn't enough vertical
// space to fit everything.
child: new ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
new DrawerHeader(
child: new Text('Drawer Header'),
decoration: new BoxDecoration(
color: Colors.blue,
),
),
new ListTile(
title: new Text('Item 1'),
leading: new Icon(Icons.language),
onTap: () {
// Update the state of the app
// ...
},
),
new ListTile(
title: new Text('Item 2'),
onTap: () {
// Update the state of the app
// ...
},
),
],
),
),
body: new Column(children: <Widget>[
new PageView(children: <Widget>[
new Container(child:
new GridView.count(
children: <Widget>[
new FlatButton(onPressed: null,
child: new Column( children: <Widget>[
new Icon(Icons.person,color: Colors.deepOrangeAccent,),
new Text("Hello"),
],
)
),
new FlatButton(onPressed: null,
child: new Column( children: <Widget>[
new Icon(Icons.person,color: Colors.tealAccent,),
new Text("Hello"),
],
)
),
new FlatButton(onPressed: null,
child: new Column( children: <Widget>[
new Icon(Icons.person,color: Colors.deepOrange,),
new Text("Hello"),
],
)
),
new FlatButton(onPressed: null,
child: new Column( children: <Widget>[
new Icon(Icons.person),
new Text("Hello"),
],
)
),
new FlatButton(onPressed: null,
child: new Column( children: <Widget>[
new Icon(Icons.person),
new Text("Hello"),
],
)
),
new FlatButton(onPressed: null,
child: new Column( children: <Widget>[
new Icon(Icons.person),
new Text("Hello"),
],
)
),
new FlatButton(onPressed: null,
child: new Column( children: <Widget>[
new Icon(Icons.person),
new Text("Hello"),
],
)
),
new FlatButton(onPressed: null,
child: new Column( children: <Widget>[
new Icon(Icons.person),
new Text("Hello"),
],
)
),
],
crossAxisCount: 4,
childAspectRatio: 1.5,
padding: const EdgeInsets.all(4.0),
mainAxisSpacing: 0.0,
crossAxisSpacing: 4.0,
shrinkWrap: true,
)
),
new Container(color: Colors.brown,),
new Container(color: Colors.amber,),
new Container(color: Colors.deepOrangeAccent,),
new Container(color: Colors.purpleAccent,)
],
controller: _pageController,
),
]),
bottomNavigationBar: new Stack(
children: <Widget>[
new Positioned(child: new BottomNavigationBar(
fixedColor: Colors.blueAccent,
type: BottomNavigationBarType.fixed,
currentIndex: _index,
onTap: (int _index) {
setState(() {
this._index = _index;
_pageController.animateToPage(_index,
duration: new Duration(milliseconds: 300),
curve: Curves.easeIn);
});
},
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(icon: new Icon(Icons.home), title: new Text("Home")),
new BottomNavigationBarItem(icon: new Icon(Icons.access_alarm), title: new Text("Transactions")),
new BottomNavigationBarItem(icon: new Icon(Icons.play_arrow), title: new Text("Pay")),
new BottomNavigationBarItem(icon: new Icon(Icons.language), title: new Text("Requests")),
new BottomNavigationBarItem(icon: new Icon(Icons.account_balance_wallet), title: new Text("Wallet"))
],
),),
new Positioned.directional(
child: new FloatingActionButton(
onPressed: null,
child:new Icon(Icons.filter_center_focus,size: 24.0,),
mini: false,
),
textDirection: TextDirection.ltr,
bottom: 0.0,
),
new Positioned.directional(
textDirection: TextDirection.ltr,
child: new Text("scan",style: new TextStyle(color: Colors.white,fontSize: 12.0),),
bottom: 6.0,
)
],
alignment: Alignment.bottomCenter,
)
);
}
}
このようなことをすることもお勧めします。残りの子がフレックス数の大きいExpanded/Flexibleでラップされていない場合、PageViewでのExpandedは可能な限り多くのスペースを取ります。
Column(
children: <Widget>[
Expanded(
flex: 1,
child: PageView(children: <Widget>[
Text('Page 1'),
Text('Page 2'),
Text('Page 3'),
]),
),
Expanded(child: Text("Test"), flex: 10), #<- add this if you don't want it to be at the bottom of the page
]),
はい、回答はすでに提供されているので、フッターを作成する必要がある場合はスタックを使用することもできます。私の場合と同様に、タイトル、本文、最後にフッターがあります。
Scaffold(
backgroundColor: PrimaryColor,
body: Stack(
children: <Widget>[
PageView(
controller: controller,
children: <Widget>[
"Your body widgets"
],
),
Container(
alignment: Alignment.bottomCenter,
child: "Your widget"
)
],
));
ListViewウィジェットを使用して修正しました