<h2 dir="auto">Steps to Reproduce</h2>
<p dir="auto">Use the following code to create tabs for a tab bar:</p>
<div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Widget _buildTab(String label, Color color) {
    return new Container(
      color: color,
      child: new Flex(
        direction: Axis.horizontal,
        children: &lt;Widget&gt;[
          new Expanded(
            child: new Container(
              height: 50.0,
              child: new Center(
                child: new Text(
                  label,
                  style: new TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontSize: 18.0,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
}"><pre class="notranslate"><span class="pl-c1">Widget</span> <span class="pl-en">_buildTab</span>(<span class="pl-c1">String</span> label, <span class="pl-c1">Color</span> color) {
    <span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-c1">Container</span>(
      color<span class="pl-k">:</span> color,
      child<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">Flex</span>(
        direction<span class="pl-k">:</span> <span class="pl-c1">Axis</span>.horizontal,
        children<span class="pl-k">:</span> <span class="pl-k">&lt;</span><span class="pl-c1">Widget</span><span class="pl-k">&gt;</span>[
          <span class="pl-k">new</span> <span class="pl-c1">Expanded</span>(
            child<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">Container</span>(
              height<span class="pl-k">:</span> <span class="pl-c1">50.0</span>,
              child<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">Center</span>(
                child<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">Text</span>(
                  label,
                  style<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">TextStyle</span>(
                    color<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.black,
                    fontWeight<span class="pl-k">:</span> <span class="pl-c1">FontWeight</span>.bold,
                    fontSize<span class="pl-k">:</span> <span class="pl-c1">18.0</span>,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
}</pre></div>
<h2 dir="auto">Description</h2>
<p dir="auto">Currently, line 894 of material/tabs.dart uses the constant padding of <code class="notranslate">kTabLabelPadding</code>. <a href="https://github.com/flutter/flutter/blob/e0956cbdb7565ddef776774cf841f54e13307a9b/packages/flutter/lib/src/material/tabs.dart#L894">Link to source</a>. This applies the padding on the entirety of the tab in a tab bar, meaning it'll apply padding not only to text/images/icons but also containers of solid colors. Currently there's no workaround besides the user fashioning their own tab bar from scratch, which is tedious considering the simpler and more flexible workaround is to give the user control via settable field.</p>
<p dir="auto">The padding between tabs in a Material TabBar is hard-coded, and this makes it hard to achieve some quite reasonable designs.</p>
<p dir="auto">I would like this padding between tabs to be configurable per-TabBar, and not hard-coded in the Flutter libraries.</p>
<p dir="auto">Here's an example. My designer would like to achieve this:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/4321921/45377099-7f29ed00-b5f1-11e8-9553-568bc48a2d4f.png"><img src="https://user-images.githubusercontent.com/4321921/45377099-7f29ed00-b5f1-11e8-9553-568bc48a2d4f.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">I can approach it in Flutter, but I have a problem:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/4321921/45377126-8f41cc80-b5f1-11e8-9d08-8ffa4d7edb73.png"><img src="https://user-images.githubusercontent.com/4321921/45377126-8f41cc80-b5f1-11e8-9d08-8ffa4d7edb73.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">The tab heading "MON 22" is too long for the space that is available. Here's why:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/4321921/45377152-a8e31400-b5f1-11e8-8709-06c7808211a8.png"><img src="https://user-images.githubusercontent.com/4321921/45377152-a8e31400-b5f1-11e8-8709-06c7808211a8.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">There is padding around each tab:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/4321921/45377174-b7313000-b5f1-11e8-994c-26a2486f954d.png"><img src="https://user-images.githubusercontent.com/4321921/45377174-b7313000-b5f1-11e8-994c-26a2486f954d.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">The reason for this is in material/tabs.dart, line 880:</p>
<div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  @override
  Widget build(BuildContext context) {
    final MaterialLocalizations localizations = MaterialLocalizations.of(context);
    if (_controller.length == 0) {
      return new Container(
        height: _kTabHeight + widget.indicatorWeight,
      );
    }

    final List&lt;Widget&gt; wrappedTabs = new List&lt;Widget&gt;(widget.tabs.length);
    for (int i = 0; i &lt; widget.tabs.length; i += 1) {
      wrappedTabs[i] = new Center(
        heightFactor: 1.0,
        child: new Padding(
          padding: kTabLabelPadding,
          child: new KeyedSubtree(
            key: _tabKeys[i],
            child: widget.tabs[i],
          ),
        ),
      );

    }"><pre class="notranslate">  <span class="pl-k">@override</span>
  <span class="pl-c1">Widget</span> <span class="pl-en">build</span>(<span class="pl-c1">BuildContext</span> context) {
    <span class="pl-k">final</span> <span class="pl-c1">MaterialLocalizations</span> localizations <span class="pl-k">=</span> <span class="pl-c1">MaterialLocalizations</span>.<span class="pl-en">of</span>(context);
    <span class="pl-k">if</span> (_controller.length <span class="pl-k">==</span> <span class="pl-c1">0</span>) {
      <span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-c1">Container</span>(
        height<span class="pl-k">:</span> _kTabHeight <span class="pl-k">+</span> widget.indicatorWeight,
      );
    }

    <span class="pl-k">final</span> <span class="pl-c1">List</span>&lt;<span class="pl-c1">Widget</span>&gt; wrappedTabs <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-c1">List</span>&lt;<span class="pl-c1">Widget</span>&gt;(widget.tabs.length);
    <span class="pl-k">for</span> (<span class="pl-c1">int</span> i <span class="pl-k">=</span> <span class="pl-c1">0</span>; i <span class="pl-k">&lt;</span> widget.tabs.length; i <span class="pl-k">+=</span> <span class="pl-c1">1</span>) {
      wrappedTabs[i] <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-c1">Center</span>(
        heightFactor<span class="pl-k">:</span> <span class="pl-c1">1.0</span>,
        child<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">Padding</span>(
          padding<span class="pl-k">:</span> kTabLabelPadding,
          child<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">KeyedSubtree</span>(
            key<span class="pl-k">:</span> _tabKeys[i],
            child<span class="pl-k">:</span> widget.tabs[i],
          ),
        ),
      );

    }</pre></div>
<p dir="auto">Each tab is padded by <code class="notranslate">kTabLabelPadding</code> — which I think is Hungarian for a constant tab label padding.</p>
<p dir="auto">This is defined as:</p>
<div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/// The horizontal padding included by [Tab]s.
const EdgeInsets kTabLabelPadding = EdgeInsets.symmetric(horizontal: 16.0);"><pre class="notranslate"><span class="pl-c">/// The horizontal padding included by <span class="pl-v">[Tab]</span>s.</span>
<span class="pl-c"></span><span class="pl-k">const</span> <span class="pl-c1">EdgeInsets</span> kTabLabelPadding <span class="pl-k">=</span> <span class="pl-c1">EdgeInsets</span>.<span class="pl-en">symmetric</span>(horizontal<span class="pl-k">:</span> <span class="pl-c1">16.0</span>);</pre></div>
<p dir="auto">If I change this to <code class="notranslate">8.0</code> and restart my app, the tab fits:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/4321921/45377421-7dacf480-b5f2-11e8-9f66-d7d893ec46cc.png"><img src="https://user-images.githubusercontent.com/4321921/45377421-7dacf480-b5f2-11e8-9f66-d7d893ec46cc.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">My designer is happy</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/4321921/45377449-8d2c3d80-b5f2-11e8-9d5a-76f29ae6adf8.png"><img src="https://user-images.githubusercontent.com/4321921/45377449-8d2c3d80-b5f2-11e8-9d5a-76f29ae6adf8.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">This is on today's Flutter master channel.</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/HansMuller/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/HansMuller">@HansMuller</a> filing this separate issue as requested in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="354034459" data-permission-text="Title is private" data-url="https://github.com/flutter/flutter/issues/21026" data-hovercard-type="issue" data-hovercard-url="/flutter/flutter/issues/21026/hovercard" href="https://github.com/flutter/flutter/issues/21026">#21026</a></p>