TabBarインジケータの幅と高さをカスタマイズするにはどうすればよいですか？

Question

私はTabBarウィジェットを使用しています。指標の高さと幅をカスタマイズしたいと思います。私は変更できる色以外の他のプロパティを見ることができません。

Answer 1

あなたはタブがデフォルトで水平に彼らのやり方を画面いっぱいに拡大したくない場合は、あなたのTabBarにisScrollable: trueのプロパティを与えます。

ContainerをPreferredSizeにラップして、TabBarのサイズにすることができます。 （PreferredSizeは、AppBarのスロットbottomに存在させたい場合にのみ必要です）。TabBarが画面に表示されないため、インジケータが狭く表示されるという影響があります。ただし、インジケータの高さはハードコーディングされています。好きではない場合は、tabs.dartの独自のコピーをインポートし、そのファイルの定数をカスタマイズする必要があります。

Containerを使用して、個々の身長の高さを設定することもできますが、それはあなたのやりたいこととは異なっていますが、Tabです。

import 'package:flutter/material.dart'; 


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



class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new DefaultTabController(
     length: 2, 
     child: new Scaffold(
     appBar: new AppBar(
      title: new Text('Tabs Demo'), 
      bottom: new PreferredSize(
      preferredSize: new Size(200.0, 200.0), 
      child: new Container(
       width: 200.0, 
       child: new TabBar(
       tabs: [ 
        new Container(
        height: 200.0, 
        child: new Tab(text: 'hello'), 
       ), 
        new Container(
        height: 200.0, 
        child: new Tab(text: 'world'), 
       ), 
       ], 
      ), 
      ), 
     ), 
     ), 
     // body: ... 
    ), 
    ); 
    } 

}