2017-06-18 3 views
0

私はスカフォールドと下部ナビゲーションを使用するホームページを持っています。足場の本体には、2枚のカードウィジェットを含むページがあります。私は下部のナビゲーションから独立している第2のカードのための "サブ"タブバーナビゲーションを実装しようとしています。カードウィジェット用にタブ付きのバーナビゲーションを実装する方法はありますか?私は足場を使用しようとしましたが、タブバーの高さはむしろ大きすぎます。ドキュメントから、これはflexiblespaceウィジェットによると思われますが、私はそれを排除/拡大する方法を見つけられていない、ポインタは高く評価されます。カードウィジェット内のTabBarナビゲーション

import 'package:flutter/material.dart'; 


void main() { 
    runApp(new MaterialApp(home: new MyTabs())); 
} 

class MyTabs extends StatefulWidget { 
    @override 
    MyTabsState createState() => new MyTabsState(); 
} 

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin { 
    TabController controller; 

    @override 
    void initState() { 
    super.initState(); 
    controller = new TabController(vsync: this, length: 3); 
    } 

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

    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
      title: new Text("Pages"), 
      backgroundColor: Colors.deepOrange, 
      ), 
     bottomNavigationBar: new Material(
      color: Colors.deepOrange, 
      child: new TabBar(controller: controller, tabs: <Tab>[ 
       new Tab(icon: new Icon(Icons.arrow_forward)), 
       new Tab(icon: new Icon(Icons.arrow_downward)), 
       new Tab(icon: new Icon(Icons.arrow_back)), 
      ])), 
     body: new TabBarView(controller: controller, children: <Widget>[ 
      new First(), 
      new Second(), 
      new Third() 
     ])); 
    } 
} 
class First extends StatefulWidget { 
    @override 
    FirstState createState() => new FirstState(); 
} 

class FirstState extends State<First> with SingleTickerProviderStateMixin { 
    TabController controller1; 

    @override 
    void initState() { 
    super.initState(); 
    controller1 = new TabController(vsync: this, length: 3); 
    } 

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



    @override 
    Widget build(BuildContext context) { 
    return new Column(children: [ 
     new Expanded(
     child: new Card(
      child: new Center(
       child: new Icon(Icons.favorite, 
        size: 150.0, color: Colors.redAccent))), 
    ), 
     new Expanded(child: new Card(
      child: new Center(
       child: new Container(
        child: new Scaffold(
         appBar: new AppBar(
          bottom: new TabBar(
           controller: controller1, 
           tabs: <Tab>[ 
           new Tab(icon: new Icon(Icons.arrow_forward)), 
           new Tab(icon: new Icon(Icons.arrow_downward)), 
           new Tab(icon: new Icon(Icons.arrow_back)), 
           ] 
         )), 
         body: new TabBarView(
          controller: controller1, 
          children: <Widget>[ 
          new Text("Hello"), 
          new Text("world"), 
          new Text("Hi") 
          ] 
        ) 
       ) 
      ) 
     ))), 
    ]); 
    } 
} 

class Second extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new Container(
     child: new Center(
      child: new Icon(Icons.favorite, size: 150.0, color: Colors.redAccent) 
     ) 
    ); 
    } 
} 

class Third extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new Container(
     child: new Center(
      child: new Icon(Icons.favorite, size: 150.0, color: Colors.redAccent) 
     ) 
    ); 
    } 
} 

コードは、このコードは、あなたが望む何をすべきhere

答えて

1

から変更されています。 ScaffoldまたはAppBarを入れ子にする必要はありません。単純なColumnが必要です。余談として

screenshot

、あなたがBottomNavigationBarTabBar以降を検討する必要がありますが、通常はそれがナビゲートするの内容の一番上に表示される素材ウィジェットです。

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MaterialApp(home: new MyTabs())); 
} 

class MyTabs extends StatefulWidget { 
    @override 
    MyTabsState createState() => new MyTabsState(); 
} 

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin { 
    TabController controller; 

    @override 
    void initState() { 
    super.initState(); 
    controller = new TabController(vsync: this, length: 3); 
    } 

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

    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
     title: new Text("Pages"), 
     backgroundColor: Colors.deepOrange, 
    ), 
     bottomNavigationBar: new Material(
     color: Colors.deepOrange, 
     child: new TabBar(controller: controller, tabs: <Tab>[ 
      new Tab(icon: new Icon(Icons.arrow_forward)), 
      new Tab(icon: new Icon(Icons.arrow_downward)), 
      new Tab(icon: new Icon(Icons.arrow_back)), 
     ])), 
     body: new TabBarView(controller: controller, children: <Widget>[ 
     new First(), 
     new Second(), 
     new Third() 
     ])); 
    } 
} 

class First extends StatefulWidget { 
    @override 
    FirstState createState() => new FirstState(); 
} 

class FirstState extends State<First> with SingleTickerProviderStateMixin { 
    TabController controller1; 

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

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

    @override 
    Widget build(BuildContext context) { 
    return new Column(children: [ 
     new Expanded(
     child: new Card(
      child: new Center(
      child: new Icon(Icons.favorite, 
       size: 150.0, color: Colors.redAccent))), 
    ), 
     new Expanded(
     child: new Card(
      child: new Column(
      children: <Widget>[ 
       new Expanded(
       child: new TabBarView(
        controller: controller1, 
        children: <Widget>[ 
        new Text("Hello"), 
        new Text("world"), 
        new Text("Hi") 
        ] 
       ), 
      ), 
       new Container(
       color: Colors.blue, 
       child: new TabBar(
        controller: controller1, 
        tabs: <Tab>[ 
        new Tab(icon: new Icon(Icons.arrow_forward)), 
        new Tab(icon: new Icon(Icons.arrow_downward)), 
        new Tab(icon: new Icon(Icons.arrow_back)), 
        ] 
       ), 
      ), 
      ], 
     ), 
     ) 
    ), 
    ]); 
    } 
} 

class Second extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new Container(
     child: new Center(
     child: new Icon(Icons.favorite, size: 150.0, color: Colors.redAccent) 
    ) 
    ); 
    } 
} 

class Third extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new Container(
     child: new Center(
     child: new Icon(Icons.favorite, size: 150.0, color: Colors.redAccent) 
    ) 
    ); 
    } 
} 
関連する問題