简体   繁体   中英

tabBar in ModalBottomSheet with dynamic size Flutter

I want to use a tabBar within a modal Bottom Sheet for user input.But tabBarView takes all the height of the page if we do not specify fixed values(Eg.height in the container ). Modal Bottom Sheet default user interaction is perfect(Bottom Sheet pop Up during keyboard input).My code snippet are given below.Can you have any solution to regain the default behaviour?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Tester',
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {

Future bottomModal(BuildContext context) {
    return showModalBottomSheet(
        isScrollControlled: true,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(12))),
        context: context,
        builder: (context) {
          return Padding(
            padding: MediaQuery.of(context).viewInsets,
            child: DefaultTabController(
              length: 2,
              initialIndex: 0,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  TabBar(
                    labelColor: Colors.red,
                    tabs: <Widget>[
                      Tab(
                        icon: Icon(Icons.edit),
                      ),
                      Tab(
                        icon: Icon(Icons.note_add),
                      )
                    ],
                  ),
                  Container(
                    height:
                        100,     //I want to use dynamic height instead of fixed height
                    child: TabBarView(
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            TextField(
                              decoration:
                                  InputDecoration(hintText: 'Enter Task'),
                            ),
                            RaisedButton(
                              child: Text('Submit'),
                              onPressed: () {},
                            )
                          ],
                        ),
                        Column(
                          children: <Widget>[
                            TextField(
                              decoration:
                                  InputDecoration(hintText: 'Personal Note'),
                            ),
                            RaisedButton(
                              onPressed: () {},
                              child: Text('Submit'),
                            ),
                          ],
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
          );
        });
  }
@override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      floatingActionButton: FloatingActionButton(
        onPressed: () => bottomModal(context),
        child: Icon(Icons.add),
      ),
      body: Center(
        child: Container(
          child: Text(
            'data',
            style: TextStyle(fontSize: 60),
          ),
        ),
      ),
    );
  }
}

TabBar之后使用Expanded而不是Container(height: 100, ...

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM