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.

score 1 · Answer 1 · answered Jul 28 '20 at 09:08

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),
      ),
    );
  }
}

score 1 · Answer 2 · answered Oct 01 '20 at 15:51

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

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

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

2 Answers2