flutter : move bottomsheet that containe a TabBarView with textfield along with keyboard

Question

I'm trying to make a bottomsheet that has a text field inside both of tabviews (second and first).. But, bottomsheet is overlapped by the keyboard.

i tryed all solutions that mentioned here: How to Move bottomsheet along with keyboard which has textfield(autofocused is true)?

it works but only for the tabs (the tabs inside the scaffold which is inside the container) without showing the tabview content, i mean the tabview disappear and show a white screen only !

here the images of my screen before keyboard apear and after:

before:

after:

THE CODE:

showModalBottomSheet(
    backgroundColor: Colors.transparent,
    context: context,
    isScrollControlled: true,
    builder: (context) {
    return Padding(
    padding: MediaQuery.of(context).viewInsets,
    child: StatefulBuilder(builder:
    (BuildContext context, StateSetter setState) {
    return Container(
        width: MediaQuery.of(context).size.width,
        height: 282,
        decoration: BoxDecoration(
            // color: colorPrimary,
            color: Colors.black,
            borderRadius: BorderRadius.only(
            topLeft: Radius.circular(18.0),
            topRight: const Radius.circular(18.0),
            ),
        ),
child: DefaultTabController(
    length: 2,
    child: Padding(
    padding: const EdgeInsets.symmetric(
        vertical: 10, horizontal: 12),
    child: Scaffold(
        resizeToAvoidBottomInset: true,
appBar: TabBar(
    tabs: [
    Tab(
        icon: Icon(
        Icons.directions_car,
        color: Colors.black,
    )),
    Tab(
        icon: Icon(
        Icons.directions_transit,
        color: Colors.black,
    )),
    ],
),
body: TabBarView(
    controller: _controller,
    children: <Widget>[
    Column(
        children: <Widget>[
        Text(
            'the first tab view',
            style: TextStyle(fontSize: 24),
        ),
        SizedBox(height: 26),
        Container(
            height: 73,
            width: MediaQuery.of(context).size.width -24,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                color: colorPrimary,
                border: Border.all(width: 0.5,
                    color: Colors.redAccent)),
            child: Align(
                alignment:Alignment.center,
                child: TextField(
                maxLength: 30,
                enableInteractiveSelection:false,
                keyboardType: TextInputType.number,
                style: TextStyle(height: 1.6),
                cursorColor: Colors.green[800],
                textAlign: TextAlign.center,
                autofocus: false,
                decoration:
                    InputDecoration(
                    border:InputBorder.none,
                    hintText:'Internet',
                    counterText: "",
                ),
                ),
            )),
        ],
    ),
    Column(
        children: <Widget>[
        Text(
            'the second tab view',
            style: TextStyle(fontSize: 24),
        ),
        SizedBox(height: 26),
        Container(
            height: 73,
            width: MediaQuery.of(context).size.width -24,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                color: colorPrimary,
                border: Border.all(width: 0.5,
                    color: Colors.redAccent)),
            child: Align(
                alignment:Alignment.center,
                child: TextField(
                maxLength: 30,
                enableInteractiveSelection:false,
                keyboardType: TextInputType.number,
                style: TextStyle(height: 1.6),
                cursorColor: Colors.green[800],
                textAlign: TextAlign.center,
                autofocus: false,
                decoration:
                    InputDecoration(
                    border:InputBorder.none,
                    hintText:'Credit',
                    counterText: "",
                ),
                ),
            )),
        ],
    )
],
)),
 ),));}),);});

so? anyone had faced this before or have any ideas to help.! and thank you.

Answer 1

You can copy paste run full code below
Step 1: You can wrap with SingleChildScrollView

builder: (context) {
        return SingleChildScrollView(
          child: Padding(

Step 2: Remove Scaffold appbar body and replace with Column

 child: Column(
      mainAxisAlignment:
          MainAxisAlignment.center,
      crossAxisAlignment:
          CrossAxisAlignment.start,
      children: <Widget>[
        TabBar(
        ...
         Expanded(
          child: TabBarView(

working demo

full code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  int _counter = 0;
  Color colorPrimary = Colors.blue;
  TabController _controller;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void initState() {
    super.initState();
    // 添加监听器
    _controller = TabController(vsync: this, length: 2);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
                child: const Text('showModalBottomSheet'),
                onPressed: () {
                  showModalBottomSheet(
                      backgroundColor: Colors.transparent,
                      context: context,
                      isScrollControlled: true,
                      builder: (context) {
                        return SingleChildScrollView(
                          child: Padding(
                            padding: MediaQuery.of(context).viewInsets,
                            child: StatefulBuilder(builder:
                                (BuildContext context, StateSetter setState) {
                              return Container(
                                  width: MediaQuery.of(context).size.width,
                                  height: 282,
                                  decoration: BoxDecoration(
                                    // color: colorPrimary,
                                    color: Colors.white,
                                    borderRadius: BorderRadius.only(
                                      topLeft: Radius.circular(18.0),
                                      topRight: const Radius.circular(18.0),
                                    ),
                                  ),
                                  child: DefaultTabController(
                                    length: 2,
                                    child: Padding(
                                      padding: const EdgeInsets.symmetric(
                                          vertical: 10, horizontal: 12),
                                      child: Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: <Widget>[
                                            TabBar(
                                              tabs: [
                                                Tab(
                                                    icon: Icon(
                                                  Icons.directions_car,
                                                  color: Colors.black,
                                                )),
                                                Tab(
                                                    icon: Icon(
                                                  Icons.directions_transit,
                                                  color: Colors.black,
                                                )),
                                              ],
                                            ),
                                            Expanded(
                                              child: TabBarView(
                                                controller: _controller,
                                                children: <Widget>[
                                                  Column(
                                                    children: <Widget>[
                                                      Text(
                                                        'the first tab view',
                                                        style: TextStyle(
                                                            fontSize: 24),
                                                      ),
                                                      SizedBox(height: 26),
                                                      Container(
                                                          height: 73,
                                                          width: MediaQuery.of(
                                                                      context)
                                                                  .size
                                                                  .width -
                                                              24,
                                                          decoration: BoxDecoration(
                                                              borderRadius:
                                                                  BorderRadius
                                                                      .circular(
                                                                          5),
                                                              color:
                                                                  colorPrimary,
                                                              border: Border.all(
                                                                  width: 0.5,
                                                                  color: Colors
                                                                      .redAccent)),
                                                          child: Align(
                                                            alignment: Alignment
                                                                .center,
                                                            child: TextField(
                                                              maxLength: 30,
                                                              enableInteractiveSelection:
                                                                  false,
                                                              keyboardType:
                                                                  TextInputType
                                                                      .number,
                                                              style: TextStyle(
                                                                  height: 1.6),
                                                              cursorColor:
                                                                  Colors.green[
                                                                      800],
                                                              textAlign:
                                                                  TextAlign
                                                                      .center,
                                                              autofocus: false,
                                                              decoration:
                                                                  InputDecoration(
                                                                border:
                                                                    InputBorder
                                                                        .none,
                                                                hintText:
                                                                    'Internet',
                                                                counterText: "",
                                                              ),
                                                            ),
                                                          )),
                                                    ],
                                                  ),
                                                  Column(
                                                    children: <Widget>[
                                                      Text(
                                                        'the second tab view',
                                                        style: TextStyle(
                                                            fontSize: 24),
                                                      ),
                                                      SizedBox(height: 26),
                                                      Container(
                                                          height: 73,
                                                          width: MediaQuery.of(
                                                                      context)
                                                                  .size
                                                                  .width -
                                                              24,
                                                          decoration: BoxDecoration(
                                                              borderRadius:
                                                                  BorderRadius
                                                                      .circular(
                                                                          5),
                                                              color:
                                                                  colorPrimary,
                                                              border: Border.all(
                                                                  width: 0.5,
                                                                  color: Colors
                                                                      .redAccent)),
                                                          child: Align(
                                                            alignment: Alignment
                                                                .center,
                                                            child: TextField(
                                                              maxLength: 30,
                                                              enableInteractiveSelection:
                                                                  false,
                                                              keyboardType:
                                                                  TextInputType
                                                                      .number,
                                                              style: TextStyle(
                                                                  height: 1.6),
                                                              cursorColor:
                                                                  Colors.green[
                                                                      800],
                                                              textAlign:
                                                                  TextAlign
                                                                      .center,
                                                              autofocus: false,
                                                              decoration:
                                                                  InputDecoration(
                                                                border:
                                                                    InputBorder
                                                                        .none,
                                                                hintText:
                                                                    'Credit',
                                                                counterText: "",
                                                              ),
                                                            ),
                                                          )),
                                                    ],
                                                  )
                                                ],
                                              ),
                                            )
                                          ]),
                                    ),
                                  ));
                            }),
                          ),
                        );
                      });
                }),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Answer 2

You can just wrap your modalBottomSheet child with Scaffold like this:

showModalBottomSheet(
        builder: (context){
            return Scaffold(
                backgroundColor: Colors.transparent,
                resizeToAvoidBottomInset: true,
                body: //your child