Skip to content

Instantly share code, notes, and snippets.

@maheshj01

maheshj01/overlay.dart

Last active May 26, 2023 19:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save maheshj01/7b3f135f090647c6ab64fb49e207f495 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save maheshj01/7b3f135f090647c6ab64fb49e207f495 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. maheshj01 revised this gist May 20, 2023. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion overlay.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -40,6 +40,9 @@ class _MyHomePageState extends State<MyHomePage> {
    itemCount: 20,
    itemBuilder: (context, index) => ListTile(
    title: Text('item $index'),
    onTap: () {
    _overlayEntry.remove();
    },
    ))),
    );
    }
    @@ -95,7 +98,10 @@ class _MyHomePageState extends State<MyHomePage> {
    ),
    ),
    onTap: () {
    Overlay.of(context)!.insert(_overlayEntry);
    if (_overlayEntry.mounted) {
    _overlayEntry.remove();
    }
    Overlay.of(context).insert(_overlayEntry);
    },
    onChanged: (query) {},
    ),
  2. maheshj01 created this gist May 20, 2023.
    113 changes: 113 additions & 0 deletions overlay.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,113 @@
    import 'package:flutter/material.dart';

    void main() {
    runApp(const MyApp());
    }

    class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
    primarySwatch: Colors.blue,
    ),
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
    }
    }

    class MyHomePage extends StatefulWidget {
    const MyHomePage({Key? key, required this.title}) : super(key: key);
    final String title;
    @override
    State<MyHomePage> createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
    final ScrollController _scrollController = ScrollController();

    Widget _list() {
    return Container(
    height: 5 * 40,
    child: Scrollbar(
    controller: _scrollController,
    thumbVisibility: true,
    child: ListView.builder(
    controller: _scrollController,
    padding: EdgeInsets.zero,
    itemCount: 20,
    itemBuilder: (context, index) => ListTile(
    title: Text('item $index'),
    ))),
    );
    }

    final LayerLink _layerLink = LayerLink();

    OverlayEntry _createOverlay() {
    final renderBox = context.findRenderObject() as RenderBox;
    final size = renderBox.size;
    final offset = renderBox.localToGlobal(Offset.zero);
    return OverlayEntry(
    builder: (context) => Positioned(
    left: offset.dx,
    width: size.width,
    child: CompositedTransformFollower(
    offset: Offset(0, 50),
    link: _layerLink,
    child: Material(color: Colors.red, child: _list())),
    ));
    }

    late OverlayEntry _overlayEntry;

    @override
    void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
    _overlayEntry = _createOverlay();
    });
    super.initState();
    }

    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
    title: Text(widget.title),
    ),
    body: Center(
    child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    CompositedTransformTarget(
    link: _layerLink,
    child: TextFormField(
    decoration: InputDecoration(
    focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(
    color: Colors.black.withOpacity(0.8),
    ),
    ),
    border: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.red),
    ),
    ),
    onTap: () {
    Overlay.of(context)!.insert(_overlayEntry);
    },
    onChanged: (query) {},
    ),
    ),
    ],
    ),
    ),
    floatingActionButton: FloatingActionButton(
    onPressed: () {},
    tooltip: 'Increment',
    child: const Icon(Icons.add),
    ),
    );
    }
    }