Skip to content

Instantly share code, notes, and snippets.

@deva666
Last active October 4, 2023 05:45
Show Gist options
  • Save deva666/035ad907f6dacd3bd335439359411561 to your computer and use it in GitHub Desktop.
Save deva666/035ad907f6dacd3bd335439359411561 to your computer and use it in GitHub Desktop.
Flutter OverlayEntry example
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'OverlayEntry Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: SearchBarHintExample(),
);
}
}
class SearchBarHintExample extends StatefulWidget {
SearchBarHintExample({Key key}) : super(key: key);
@override
_SearchBarHintExampleState createState() => _SearchBarHintExampleState();
}
class _SearchBarHintExampleState extends State<SearchBarHintExample> {
final TextEditingController controller = new TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: const EdgeInsets.all(16),
child: Column(
children: [
const SizedBox(
height: 32,
),
SearchBarWithHint(),
const SizedBox(
height: 64,
),
RaisedButton(
shape: RoundedRectangleBorder(
side: BorderSide(color: Theme.of(context).primaryColor), borderRadius: BorderRadius.circular(32)),
color: Theme.of(context).primaryColor,
textColor: Colors.white,
child: Text('Remove Focus'),
onPressed: () {
FocusScope.of(context).unfocus();
},
)
],
)));
}
}
class SearchBarWithHint extends StatefulWidget {
@override
_SearchBarWithHintState createState() => _SearchBarWithHintState();
}
class _SearchBarWithHintState extends State<SearchBarWithHint> with SingleTickerProviderStateMixin {
final FocusNode searchNode = FocusNode();
final TextEditingController searchController = new TextEditingController();
bool isHintShown = false;
Offset textFieldPosition;
Size widgetSize;
OverlayEntry overlayEntry;
AnimationController animationController;
@override
void initState() {
animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 350),
);
searchController.addListener(onTextInput);
searchNode.addListener(() {
if (searchNode.hasPrimaryFocus) {
Future.delayed(const Duration(milliseconds: 300)).then((value) => showHint());
}
});
super.initState();
}
@override
void dispose() {
animationController.dispose();
searchNode.dispose();
searchController.dispose();
super.dispose();
}
void onTextInput() {
if (isHintShown) {
closeHint();
}
}
void closeHint() {
overlayEntry?.remove();
overlayEntry = null;
isHintShown = false;
}
void showHint() {
findParent();
overlayEntry = _overlayEntryBuilder();
Overlay.of(context).insert(overlayEntry);
isHintShown = true;
}
findParent() {
RenderBox renderBox = context.findRenderObject();
widgetSize = renderBox.size;
textFieldPosition = renderBox.localToGlobal(Offset.zero);
}
OverlayEntry _overlayEntryBuilder() {
return OverlayEntry(
maintainState: true,
builder: (context) {
return GestureDetector(
onTap: () {
if (isHintShown) {
closeHint();
}
},
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.transparent,
child: Stack(children: [
Positioned(
top: textFieldPosition.dy + 56,
left: 24,
right: 24,
child: Material(
color: Colors.transparent,
child: Stack(children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.only(right: 8),
child: ClipPath(
clipper: ArrowClipper(),
child: Container(
width: 16,
height: 16,
color: Colors.grey.shade900,
),
)),
),
Align(
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.only(top: 15),
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.grey.shade900, borderRadius: BorderRadius.circular(6)),
child: Text(
'Search for any super hero, just type a name like \'Batman\' ... ',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.subtitle1.copyWith(color: Colors.white),
),
)))
]),
),
)
])));
},
);
}
@override
Widget build(BuildContext context) {
return TextField(
focusNode: searchNode,
controller: searchController,
decoration: InputDecoration(
hintText: 'Search ...',
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide())),
);
}
}
class ArrowClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
path.moveTo(0, size.height);
path.lineTo(size.width / 2, size.height / 2);
path.lineTo(size.width, size.height);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment