Last active
December 7, 2018 15:45
-
-
Save ffeu/3bb8f9a2bcc1202a616ebb802b47f516 to your computer and use it in GitHub Desktop.
PopupMenuItem/PopupMenuButton gets misplaced when inside a ReorderableListView>ListTile (flutter 1.0.0)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| void main() => runApp(MyApp()); | |
| const title = "PopupMenuButton test"; | |
| class MyItem { | |
| MyItem(this.icon, this.title); | |
| final IconData icon; | |
| final String title; | |
| } | |
| class MyApp extends StatelessWidget { | |
| @override | |
| Widget build(BuildContext context) { | |
| return MaterialApp( | |
| title: title, | |
| theme: ThemeData( | |
| primarySwatch: Colors.pink, | |
| ), | |
| home: MyHomePage(), | |
| ); | |
| } | |
| } | |
| class MyHomePage extends StatefulWidget { | |
| @override | |
| _MyHomePageState createState() => _MyHomePageState(); | |
| } | |
| class _MyHomePageState extends State<MyHomePage> { | |
| List<MyItem> _sampleItems; | |
| bool _reorderable; | |
| @override | |
| void initState() { | |
| super.initState(); | |
| _reorderable = true; | |
| _sampleItems = [ | |
| MyItem(Icons.ac_unit, "Item 1"), | |
| MyItem(Icons.access_alarm, "Item 2"), | |
| MyItem(Icons.accessibility, "Item 3"), | |
| MyItem(Icons.accessible, "Item 4"), | |
| ]; | |
| } | |
| Widget _buildOptions(MyItem item) { | |
| return PopupMenuButton( | |
| itemBuilder: (BuildContext context) { | |
| return [ | |
| new PopupMenuItem(child: new Text("edit"), value: "edit"), | |
| new PopupMenuItem(child: new Text("delete"), value: "delete"), | |
| ]; | |
| }, | |
| onSelected: (selected) async { | |
| await showDialog(context: context, | |
| builder: (BuildContext context) { | |
| return SimpleDialog( | |
| title: Text(selected), | |
| contentPadding: EdgeInsets.all(25.0), | |
| children: <Widget>[Text("Item [${item.title}], Operation [$selected].")], | |
| ); | |
| } | |
| ); | |
| }, | |
| ); | |
| } | |
| Widget _buildListTile(BuildContext context, MyItem item) { | |
| return ListTile(key: Key(item.title), | |
| leading: Icon(item.icon), | |
| title: Text(item.title), | |
| trailing: _buildOptions(item), | |
| ); | |
| } | |
| Widget _buildReorderableListView(BuildContext context) { | |
| return ReorderableListView( | |
| children: _sampleItems | |
| .map((MyItem item) => _buildListTile(context, item)).toList(), | |
| onReorder: (oldIndex, newIndex) { | |
| setState(() { | |
| if (newIndex > _sampleItems.length) newIndex = _sampleItems.length; | |
| if (oldIndex < newIndex) newIndex--; | |
| MyItem item = _sampleItems[oldIndex]; | |
| _sampleItems.remove(item); | |
| _sampleItems.insert(newIndex, item); | |
| }); | |
| }, | |
| ); | |
| } | |
| Widget _buildListView(BuildContext context) { | |
| return ListView( | |
| children: _sampleItems | |
| .map((MyItem item) => _buildListTile(context, item)).toList(), | |
| ); | |
| } | |
| Widget _buildSwitch(BuildContext context) { | |
| return Row( | |
| mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
| children: <Widget>[ | |
| Text(_reorderable ? "Using ReorderableListView": "Using ListView"), | |
| Switch.adaptive(value: _reorderable, onChanged: (bool value) => setState(() => _reorderable = value)), | |
| ], | |
| ); | |
| } | |
| Widget _buildBody(BuildContext context) { | |
| return Container( | |
| padding: EdgeInsets.all(10.0), | |
| child: Column( | |
| children: <Widget>[ | |
| _buildSwitch(context), | |
| Expanded( | |
| child: _reorderable | |
| ? _buildReorderableListView(context) | |
| : _buildListView(context) | |
| ), | |
| ], | |
| ), | |
| ); | |
| } | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| appBar: AppBar(title: Text(title)), | |
| body: _buildBody(context), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment