<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.5 17F77, locale en-CR)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.1)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio (version 3.1)
[!] IntelliJ IDEA Community Edition (version 2017.1.2)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
[✓] Connected devices (2 available)"><pre class="notranslate"><code class="notranslate">Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.5 17F77, locale en-CR)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.1)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio (version 3.1)
[!] IntelliJ IDEA Community Edition (version 2017.1.2)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
[✓] Connected devices (2 available)
</code></pre></div>
<p dir="auto">Download the Flutter gallery app from the <a href="https://play.google.com/store/apps/details?id=io.flutter.demo.gallery" rel="nofollow">Google Play Store</a>, open the Date Time picker example, the Ok/Cancel buttons are not rendered due the screen size.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1301103/42246268-391fe6e2-7ed9-11e8-95b6-48276461ce42.png"><img src="https://user-images.githubusercontent.com/1301103/42246268-391fe6e2-7ed9-11e8-95b6-48276461ce42.png" alt="device-2018-07-03-155311" style="max-width: 100%;"></a></p>
<p dir="auto">I was able to reproduce it also doing my implementation of the <a href="https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/date_and_time_picker_demo.dart">Date and Time picker demo</a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1301103/42246373-937bc408-7ed9-11e8-9d06-821136bc2762.png"><img src="https://user-images.githubusercontent.com/1301103/42246373-937bc408-7ed9-11e8-9d06-821136bc2762.png" alt="device-2018-07-03-155549" style="max-width: 100%;"></a></p>
<p dir="auto">This issue only happens on small screen devices, if I open the Date Picker dialog in a +5" everything is rendered correctly.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.6 17G65, locale pt-BR)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio (version 3.1)
[✓] Connected devices (1 available)"><pre class="notranslate"><code class="notranslate">flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.6 17G65, locale pt-BR)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio (version 3.1)
[✓] Connected devices (1 available)
</code></pre></div>
<p dir="auto">The <code class="notranslate">DatePicker</code> widget is with bug when displayed on small mobile phone screens.</p>
<p dir="auto">(LG K130) mobile phone screen is  is height: 521 and width: 320</p>
<p dir="auto">Below is the evidence and the code used</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/9912894/43180959-4a7d6bce-8fb1-11e8-8cd1-21c9cac4db7b.png"><img src="https://user-images.githubusercontent.com/9912894/43180959-4a7d6bce-8fb1-11e8-8cd1-21c9cac4db7b.png" alt="screenshot_2018-07-25-02-10-29" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/9912894/43180967-52a87762-8fb1-11e8-9fa1-0301230690f1.png"><img src="https://user-images.githubusercontent.com/9912894/43180967-52a87762-8fb1-11e8-9fa1-0301230690f1.png" alt="screenshot_2018-07-25-02-10-44" style="max-width: 100%;"></a></p>
<div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import 'dart:async';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() =&gt; runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() =&gt; new _MyHomePageState();
}

class _MyHomePageState extends State&lt;MyHomePage&gt; {

  DateTime _fromDateTime = new DateTime.now();

  Future&lt;Null&gt; _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: _fromDateTime,
      firstDate: new DateTime(2018),
      lastDate: new DateTime(2020)
    );

    if(picked != null &amp;&amp; picked != _fromDateTime) {
      setState(() {
        _fromDateTime = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    final ui.Size logicalSize = MediaQuery.of(context).size;
    final double _width = logicalSize.width;
    final double _height = logicalSize.height;

    // [height: , 521.3333333333334,   _width: , 320.0]
    print(['height: ', _height, '  _width: ', _width]);
    
    return new Scaffold(
      appBar: new AppBar(),
      body: new InkWell(
        onTap: () {
          _selectDate(context);
        },
        child: new Container(
          padding: EdgeInsets.only(top: 12.0, bottom: 12.0, left: 16.0, right: 16.0),
          decoration: new BoxDecoration(
            borderRadius: new BorderRadius.all(new Radius.circular(4.0)),
            border: new Border.all(
              color: Colors.black45,
              width: 1.0,
            ),
          ),
          child: new Text('${_fromDateTime.toString()}'),
        ),
      )
    );
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s">'dart:async'</span>;
<span class="pl-k">import</span> <span class="pl-s">'package:flutter/material.dart'</span>;
<span class="pl-k">import</span> <span class="pl-s">'dart:ui'</span> <span class="pl-k">as</span> ui;

<span class="pl-k">void</span> <span class="pl-en">main</span>() <span class="pl-k">=&gt;</span> <span class="pl-en">runApp</span>(<span class="pl-k">new</span> <span class="pl-c1">MyApp</span>());

<span class="pl-k">class</span> <span class="pl-c1">MyApp</span> <span class="pl-k">extends</span> <span class="pl-c1">StatelessWidget</span> {
  <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">return</span> <span class="pl-k">new</span> <span class="pl-c1">MaterialApp</span>(
      home<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">MyHomePage</span>(),
    );
  }
}

<span class="pl-k">class</span> <span class="pl-c1">MyHomePage</span> <span class="pl-k">extends</span> <span class="pl-c1">StatefulWidget</span> {
  <span class="pl-k">@override</span>
  <span class="pl-c1">_MyHomePageState</span> <span class="pl-en">createState</span>() <span class="pl-k">=&gt;</span> <span class="pl-k">new</span> <span class="pl-c1">_MyHomePageState</span>();
}

<span class="pl-k">class</span> <span class="pl-c1">_MyHomePageState</span> <span class="pl-k">extends</span> <span class="pl-c1">State</span>&lt;<span class="pl-c1">MyHomePage</span>&gt; {

  <span class="pl-c1">DateTime</span> _fromDateTime <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-c1">DateTime</span>.<span class="pl-en">now</span>();

  <span class="pl-c1">Future</span>&lt;<span class="pl-c1">Null</span>&gt; <span class="pl-en">_selectDate</span>(<span class="pl-c1">BuildContext</span> context) <span class="pl-k">async</span> {
    <span class="pl-k">final</span> <span class="pl-c1">DateTime</span> picked <span class="pl-k">=</span> <span class="pl-k">await</span> <span class="pl-en">showDatePicker</span>(
      context<span class="pl-k">:</span> context,
      initialDate<span class="pl-k">:</span> _fromDateTime,
      firstDate<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">DateTime</span>(<span class="pl-c1">2018</span>),
      lastDate<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">DateTime</span>(<span class="pl-c1">2020</span>)
    );

    <span class="pl-k">if</span>(picked <span class="pl-k">!=</span> <span class="pl-c1">null</span> <span class="pl-k">&amp;&amp;</span> picked <span class="pl-k">!=</span> _fromDateTime) {
      <span class="pl-en">setState</span>(() {
        _fromDateTime <span class="pl-k">=</span> picked;
      });
    }
  }

  <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> ui.<span class="pl-c1">Size</span> logicalSize <span class="pl-k">=</span> <span class="pl-c1">MediaQuery</span>.<span class="pl-en">of</span>(context).size;
    <span class="pl-k">final</span> <span class="pl-c1">double</span> _width <span class="pl-k">=</span> logicalSize.width;
    <span class="pl-k">final</span> <span class="pl-c1">double</span> _height <span class="pl-k">=</span> logicalSize.height;

    <span class="pl-c">// [height: , 521.3333333333334,   _width: , 320.0]</span>
    <span class="pl-en">print</span>([<span class="pl-s">'height: '</span>, _height, <span class="pl-s">'  _width: '</span>, _width]);
    
    <span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-c1">Scaffold</span>(
      appBar<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">AppBar</span>(),
      body<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">InkWell</span>(
        onTap<span class="pl-k">:</span> () {
          <span class="pl-en">_selectDate</span>(context);
        },
        child<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">Container</span>(
          padding<span class="pl-k">:</span> <span class="pl-c1">EdgeInsets</span>.<span class="pl-en">only</span>(top<span class="pl-k">:</span> <span class="pl-c1">12.0</span>, bottom<span class="pl-k">:</span> <span class="pl-c1">12.0</span>, left<span class="pl-k">:</span> <span class="pl-c1">16.0</span>, right<span class="pl-k">:</span> <span class="pl-c1">16.0</span>),
          decoration<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">BoxDecoration</span>(
            borderRadius<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">BorderRadius</span>.<span class="pl-en">all</span>(<span class="pl-k">new</span> <span class="pl-c1">Radius</span>.<span class="pl-en">circular</span>(<span class="pl-c1">4.0</span>)),
            border<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-c1">Border</span>.<span class="pl-en">all</span>(
              color<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.black45,
              width<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">Text</span>(<span class="pl-s">'<span class="pl-s">${<span class="pl-v">_fromDateTime</span>.<span class="pl-en">toString</span>()}</span>'</span>),
        ),
      )
    );
  }
}</pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="I/flutter ( 3470): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 3470): The following message was thrown during layout:
I/flutter ( 3470): A RenderFlex overflowed by 40 pixels on the bottom.
I/flutter ( 3470): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 3470): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 3470): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter ( 3470): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter ( 3470): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter ( 3470): This is considered an error condition because it indicates that there is content that cannot be
I/flutter ( 3470): seen. If the content is legitimately bigger than the available space, consider clippingit with a
I/flutter ( 3470): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter ( 3470): like a ListView.
I/flutter ( 3470): The specific RenderFlex in question is:
I/flutter ( 3470):   RenderFlex#ecf38 relayoutBoundary=up7 OVERFLOWING
I/flutter ( 3470):   creator: Column ← SizedBox ← LayoutBuilder ← OrientationBuilder ← DefaultTextStyle ←
I/flutter ( 3470):   AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#7e953 ink renderer] ←
I/flutter ( 3470):   NotificationListener&lt;LayoutChangedNotification&gt; ← CustomPaint ← _ShapeBorderPaint ← PhysicalShape
I/flutter ( 3470):   ← _MaterialInterior ← ⋯
I/flutter ( 3470):   parentData: &lt;none&gt; (can use size)
I/flutter ( 3470):   constraints: BoxConstraints(w=240.0, 0.0&lt;=h&lt;=448.0)
I/flutter ( 3470):   size: Size(240.0, 448.0)
I/flutter ( 3470):   direction: vertical
I/flutter ( 3470):   mainAxisAlignment: start
I/flutter ( 3470):   mainAxisSize: min
I/flutter ( 3470):   crossAxisAlignment: stretch
I/flutter ( 3470):   verticalDirection: down
I/flutter ( 3470): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter ( 3470): ════════════════════════════════════════════════════════════════════════════════════════════════════
`
``"><pre class="notranslate"><code class="notranslate">I/flutter ( 3470): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 3470): The following message was thrown during layout:
I/flutter ( 3470): A RenderFlex overflowed by 40 pixels on the bottom.
I/flutter ( 3470): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 3470): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 3470): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter ( 3470): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter ( 3470): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter ( 3470): This is considered an error condition because it indicates that there is content that cannot be
I/flutter ( 3470): seen. If the content is legitimately bigger than the available space, consider clippingit with a
I/flutter ( 3470): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter ( 3470): like a ListView.
I/flutter ( 3470): The specific RenderFlex in question is:
I/flutter ( 3470):   RenderFlex#ecf38 relayoutBoundary=up7 OVERFLOWING
I/flutter ( 3470):   creator: Column ← SizedBox ← LayoutBuilder ← OrientationBuilder ← DefaultTextStyle ←
I/flutter ( 3470):   AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#7e953 ink renderer] ←
I/flutter ( 3470):   NotificationListener&lt;LayoutChangedNotification&gt; ← CustomPaint ← _ShapeBorderPaint ← PhysicalShape
I/flutter ( 3470):   ← _MaterialInterior ← ⋯
I/flutter ( 3470):   parentData: &lt;none&gt; (can use size)
I/flutter ( 3470):   constraints: BoxConstraints(w=240.0, 0.0&lt;=h&lt;=448.0)
I/flutter ( 3470):   size: Size(240.0, 448.0)
I/flutter ( 3470):   direction: vertical
I/flutter ( 3470):   mainAxisAlignment: start
I/flutter ( 3470):   mainAxisSize: min
I/flutter ( 3470):   crossAxisAlignment: stretch
I/flutter ( 3470):   verticalDirection: down
I/flutter ( 3470): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter ( 3470): ════════════════════════════════════════════════════════════════════════════════════════════════════
`
``
</code></pre></div>