質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Q&A

解決済

1回答

3794閲覧

Flutter:Tabで動的に追加したWidgetを直後に表示したい

lightfull

総合スコア11

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

0グッド

0クリップ

投稿2020/04/10 15:48

編集2020/04/10 15:51

やりたいこと

動的にタブを追加した後、その追加したタブを直ぐに表示させたいです。

事象

indexを変更しただけだと、タブ上はindexで指定したところに移動していますが、
中身が追加する前のままとなっています。

indexに合わせて、TabBarViewも変更する方法はないでしょうか?

ソース

参考サイトのソースを少し変更しています。
+ボタンで追加してもタブは追加されても、ページの内容が変わっていないことが確認できます。
スライドするとインジケータがいきなり飛びます。(追加する前のタブの位置に戻るといったほうが正解かも)

よろしくおねがいします。

Flutter

1import 'package:flutter/material.dart'; 2 3void main() { 4 runApp(new MaterialApp( 5 home: new CardStack(), 6 )); 7} 8 9class DynamicTabContent { 10 IconData icon; 11 String tooTip; 12 13 DynamicTabContent.name(this.icon, this.tooTip); 14} 15 16class CardStack extends StatefulWidget { 17 @override 18 _MainState createState() => new _MainState(); 19} 20 21class _MainState extends State<CardStack> with TickerProviderStateMixin { 22 List<DynamicTabContent> myList = new List(); 23 24 TabController _cardController; 25 26 TabPageSelector _tabPageSelector; 27 28 @override 29 void initState() { 30 super.initState(); 31 32 myList.add(new DynamicTabContent.name(Icons.favorite, "Favorited")); 33 myList.add(new DynamicTabContent.name(Icons.local_pizza, "local pizza")); 34 35 _cardController = new TabController(vsync: this, length: myList.length); 36 _tabPageSelector = new TabPageSelector(controller: _cardController); 37 } 38 39 @override 40 void dispose() { 41 _cardController.dispose(); 42 super.dispose(); 43 } 44 45 @override 46 Widget build(BuildContext context) { 47 return new Scaffold( 48 backgroundColor: Colors.grey[300], 49 appBar: new AppBar( 50 actions: <Widget>[ 51 new Padding( 52 padding: const EdgeInsets.all(1.0), 53 child: new IconButton( 54 icon: const Icon( 55 Icons.add, 56 size: 30.0, 57 color: Colors.white, 58 ), 59 tooltip: 'Add Tabs', 60 onPressed: () { 61 List<DynamicTabContent> tempList = new List(); 62 63 myList.forEach((dynamicContent) { 64 tempList.add(dynamicContent); 65 }); 66 67 setState(() { 68 myList.clear(); 69 }); 70 71 tempList.forEach((dynamicContent) { 72 myList.add(dynamicContent); 73 }); 74 75 if (tempList.length % 2 == 0) { 76 myList.add(new DynamicTabContent.name( 77 Icons.shopping_cart, "shopping cart")); 78 } else { 79 myList.add( 80 new DynamicTabContent.name(Icons.camera, "camera")); 81 } 82 83 setState(() { 84 _cardController = 85 new TabController(vsync: this, length: myList.length); 86 _tabPageSelector = 87 new TabPageSelector(controller: _cardController); 88 _cardController.index = myList.length - 1; 89 }); 90 }, 91 ), 92 ), 93 ], 94 title: new Text("Title Here"), 95 bottom: new PreferredSize( 96 preferredSize: const Size.fromHeight(10.0), 97 child: new Theme( 98 data: Theme.of(context).copyWith(accentColor: Colors.grey), 99 child: myList.isEmpty 100 ? new Container( 101 height: 30.0, 102 ) 103 : new Container( 104 height: 30.0, 105 alignment: Alignment.center, 106 child: _tabPageSelector, 107 ), 108 ))), 109 body: new TabBarView( 110 controller: _cardController, 111 children: myList.isEmpty 112 ? <Widget>[] 113 : myList.map((dynamicContent) { 114 return new Card( 115 child: new Container( 116 height: 450.0, 117 width: 300.0, 118 child: new IconButton( 119 icon: new Icon(dynamicContent.icon, size: 100.0), 120 tooltip: dynamicContent.tooTip, 121 onPressed: null, 122 )), 123 ); 124 }).toList(), 125 ), 126 ); 127 } 128} 129

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

_cardController.index = myList.length - 1; の部分を、次のようにしてみてはいかがでしょう?
_cardController.animateTo(myList.length - 1);


setState部分

Dart

1 setState(() { 2 _cardController = 3 new TabController(vsync: this, length: myList.length); 4 _tabPageSelector = 5 new TabPageSelector(controller: _cardController); 6 //_cardController.index = myList.length - 1; // これを以下のように書き換える 7 _cardController.animateTo(myList.length - 1); 8 });

投稿2020/05/08 08:12

satokei

総合スコア1217

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lightfull

2020/05/09 11:33

ありがとうございます!! こんな簡単なことだったとは・・・。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問