Reputation: 99
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 :
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.
Upvotes: 0
Views: 3531
Reputation: 1706
You can just wrap your modalBottomSheet child with Scaffold
like this:
showModalBottomSheet(
builder: (context){
return Scaffold(
backgroundColor: Colors.transparent,
resizeToAvoidBottomInset: true,
body: //your child
Upvotes: 1
Reputation: 54417
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),
),
);
}
}
Upvotes: 1