I took some code from stack overflow which open an overlay with transparent background but my issue is when I put a text field in the center so when pressing on it the screen not scroll to top, the text field hide behind the keyboard.
I tried to put SingleChildScrollView in Center widget and doesn't work!
any one help please
import 'package:flutter/material.dart';
import 'package:smooth_star_rating/smooth_star_rating.dart';
class feedback extends ModalRoute<void> {
TextEditingController _reviewController = TextEditingController();
@override
Duration get transitionDuration => Duration(milliseconds: 700);
@override
bool get opaque => false;
@override
bool get barrierDismissible => false;
@override
Color get barrierColor => Colors.black.withOpacity(0.5);
@override
String get barrierLabel => null;
@override
bool get maintainState => true;
@override
Widget buildPage(BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,) {
// This makes sure that text and other content follows the material style
return Material(
type: MaterialType.transparency,
// make sure that the overlay content is not cut off
child: SafeArea(
child: _buildOverlayContent(context),
),
);
}
Widget _buildOverlayContent(BuildContext context) {
return new GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
color: Colors.grey[50],
boxShadow: [
BoxShadow(
color: Colors.grey[300],
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 6.0,
),
],
borderRadius: new BorderRadius.all(const Radius.circular(15))
),
margin: EdgeInsets.all(10),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children:[
Container(
color: Colors.grey[50],
// padding: EdgeInsets.only(right: 5, top: 8),
alignment: Alignment.topRight,
child: IconButton(
icon: Icon(Icons.close_rounded, color: Colors.grey),
onPressed: () {
}),
),
Container(
color: Colors.grey[50],
padding: EdgeInsets.only(top: 20),
alignment: Alignment.center,
child: Text(
"Send us your feedback!",
style: new TextStyle(
fontSize: 25,
color: Colors.blue
),
)
),
Container(
color: Colors.grey[50],
padding: EdgeInsets.only(top: 8),
alignment: Alignment.center,
child: Text(
"Rate this service",
style: new TextStyle(
fontSize: 17,
color: Colors.grey[700]
),
)
),
Container(
color: Colors.grey[50],
padding: EdgeInsets.only(top: 30),
child: SmoothStarRating(
starCount: 5,
rating: 4,
size: 40.0,
isReadOnly: false,
// fullRatedIconData: Icons.blur_off,
// halfRatedIconData: Icons.blur_on,
color: Colors.amber,
borderColor: Colors.amber,
spacing: 0.0
)
),
Container(
color: Colors.grey[50],
padding: EdgeInsets.only(
top: 40, left: 18, right: 18),
child: TextFormField(
maxLines: 3,
autovalidateMode: AutovalidateMode
.onUserInteraction,
controller: _reviewController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Write a review',
hintText: ''
),
),
),
Container(
color: Colors.grey[50],
padding: EdgeInsets.only(top: 30, bottom: 20),
child: RaisedButton(
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50)
),
child: Text("Send", style: new TextStyle(
fontSize: 20, color: Colors.white)),
onPressed: () {
},
)
)
]
)
)
]
)
)
);
}
@override
Widget buildTransitions(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
return FadeTransition(
opacity: animation,
child: ScaleTransition(
scale: animation,
child: child,
),
);
}
}
CodePudding user response：
May try the code below, should work fine,
class DebugErrorClass2 extends StatefulWidget {
DebugErrorClass2({
Key? key,
}) : super(key: key);
@override
_DebugErrorClass2State createState() => _DebugErrorClass2State();
}
class _DebugErrorClass2State extends State<DebugErrorClass2> {
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
Widget _buildOverlayContent() {
return new GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
color: Colors.grey[50],
boxShadow: [
BoxShadow(
color: Colors.red,
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 6.0,
),
],
borderRadius: new BorderRadius.all(
const Radius.circular(15))
),
margin: EdgeInsets.all(10),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Container(
color: Colors.grey[50],
// padding: EdgeInsets.only(right: 5, top: 8),
alignment: Alignment.topRight,
child: IconButton(
icon: Icon(
Icons.close_rounded, color: Colors.grey),
onPressed: () {
}),
),
Container(
color: Colors.grey[50],
padding: EdgeInsets.only(top: 20),
alignment: Alignment.center,
child: Text(
"Send us your feedback!",
style: new TextStyle(
fontSize: 25,
color: Colors.blue
),
)
),
Container(
color: Colors.grey[50],
padding: EdgeInsets.only(top: 8),
alignment: Alignment.center,
child: Text(
"Rate this service",
style: new TextStyle(
fontSize: 17,
color: Colors.grey[700]
),
)
),
Container(
color: Colors.grey[50],
padding: EdgeInsets.only(top: 30),
child: SmoothStarRating(
starCount: 5,
rating: 4,
size: 40.0,
isReadOnly: false,
// fullRatedIconData: Icons.blur_off,
// halfRatedIconData: Icons.blur_on,
color: Colors.amber,
borderColor: Colors.amber,
spacing: 0.0
)
),
Container(
color: Colors.grey[50],
padding: EdgeInsets.only(
top: 40, left: 18, right: 18),
child: TextFormField(
maxLines: 3,
autovalidateMode: AutovalidateMode
.onUserInteraction,
// controller: _reviewController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Write a review',
hintText: ''
),
),
),
Container(
color: Colors.grey[50],
padding: EdgeInsets.only(top: 30, bottom: 20),
child: RaisedButton(
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50)
),
child: Text("Send", style: new TextStyle(
fontSize: 20, color: Colors.white)),
onPressed: () {
},
)
)
]
)
)
]
)
)
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
alignment: Alignment.center,
width: double.infinity,
height: double.infinity,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
_buildOverlayContent(),
],
),
),
),
),
);
}
}