How to fix ' FlatButton hidden behind the keyboard'? - flutter

Question

I Have a widget showModalBottomSheet .. inside it has a class (AddTaskScreen),
But FlatButton hidden behind the keyboard .. What should I do to make it visible?
this is code :
class AddTaskScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
String newTaskTitle;
return Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'Add Task',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30.0,
color: Colors.lightBlueAccent,
fontWeight: FontWeight.w700),
),
TextField(
autofocus: true,
textAlign: TextAlign.center,
onChanged: (newText) {
newTaskTitle = newText;
},
),
FlatButton(
child: Text(
'Add',
style: TextStyle(color: Colors.white),
),
color: Colors.lightBlueAccent,
onPressed: () {
Provider.of<TaskData>(context).addTask(newTaskTitle);
Navigator.pop(context);
},
)
],
),
);
}
}
i tried this solution but doesn't work :
Padding(
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: FlatButton()
)
this is image ScreenShot of my App

Answer 1

You can trigger bottom sheet using this code
void openBottomSheet(context) {
showModalBottomSheet<dynamic>(
context: context,
builder: (BuildContext context) {
return Padding(
padding:
EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: Wrap(
children: <Widget>[
AddTaskScreen(),
],
),
);
},
);
}
make sure we wrap AddTaskScreen with Wrap so it will efficiently rendered.
and we also wrap it with Padding and its value of viewInsets.bottom
this is the full code
import 'package:flutter/material.dart';
class AddTaskScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
String newTaskTitle;
return Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'Add Task',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30.0,
color: Colors.lightBlueAccent,
fontWeight: FontWeight.w700),
),
TextField(
autofocus: false,
textAlign: TextAlign.center,
onChanged: (newText) {
newTaskTitle = newText;
},
),
FlatButton(
child: Text(
'Add',
style: TextStyle(color: Colors.white),
),
color: Colors.lightBlueAccent,
onPressed: () {
Navigator.pop(context);
},
)
],
),
);
}
}
class ButtomSheetScreen extends StatelessWidget {
void openBottomSheet(context) {
showModalBottomSheet<dynamic>(
context: context,
builder: (BuildContext context) {
return Padding(
padding:
EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: Wrap(
children: <Widget>[
AddTaskScreen(),
],
),
);
},
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Bottom Sheet",
),
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(Icons.chat_bubble_outline),
onPressed: () {
openBottomSheet(context);
},
);
},
),
),
body: Container(),
);
}
}
Here is the repo of example working-app.

Answer 2

Wrap you container in SingleChildScrollView() widget. By this, user can scroll to view the button.
return SingleChildScrollView(
child: Container(

Answer 3

Wrap the Container in a ListViewBuilder so that the button can be scrolled up/down. I think I got the parenthesis correct below:
return ( ListView.builder(
itemCount: 1,
itemBuilder: (context, index) {
return ( Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'Add Task',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30.0,
color: Colors.lightBlueAccent,
fontWeight: FontWeight.w700),
),
TextField(
autofocus: true,
textAlign: TextAlign.center,
onChanged: (newText) {
newTaskTitle = newText;
},
),
FlatButton(
child: Text(
'Add',
style: TextStyle(color: Colors.white),
),
color: Colors.lightBlueAccent,
onPressed: () {
Provider.of<TaskData>(context).addTask(newTaskTitle);
Navigator.pop(context);
},
)
],
),
) );
}));