Last active
June 30, 2018 01:27
-
-
Save rodydavis/3b001ec00945d4ed0f9a7a52915e01ec to your computer and use it in GitHub Desktop.
In Flutter show a Drop Down for Android and a Picker for iOS
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 'dart:io'; | |
import 'package:flutter/cupertino.dart'; | |
import 'package:flutter/material.dart'; | |
import 'package:my_unify_mobile/custom/native_widgets.dart'; | |
class ExamplePickerPage extends StatefulWidget { | |
@override | |
ExamplePickerPageState createState() => ExamplePickerPageState(); | |
} | |
class ExamplePickerPageState extends State<ExamplePickerPage> { | |
double _kPickerSheetHeight = 216.0; | |
double _kPickerItemHeight = 32.0; | |
int _index = 0; | |
List<String> _items = ['Test', 'Example', 'Demo']; | |
String selection = ""; | |
bool _isDarkTheme = false; | |
double _fontSize = 14.0; | |
Widget _buildNativePicker() { | |
final FixedExtentScrollController scrollController = | |
new FixedExtentScrollController(initialItem: _index); | |
return Platform.isIOS | |
? new Container( | |
height: _kPickerSheetHeight, | |
color: CupertinoColors.white, | |
child: new DefaultTextStyle( | |
style: const TextStyle( | |
color: CupertinoColors.black, | |
fontSize: 22.0, | |
), | |
child: new GestureDetector( | |
// Blocks taps from propagating to the modal sheet and popping. | |
onTap: () {}, | |
child: new SafeArea( | |
child: new CupertinoPicker( | |
scrollController: scrollController, | |
itemExtent: _kPickerItemHeight, | |
backgroundColor: CupertinoColors.white, | |
onSelectedItemChanged: (int index) { | |
setState(() { | |
_index = index; | |
selection = _items[_index]; | |
}); | |
}, | |
children: | |
new List<Widget>.generate(_items.length, (int index) { | |
return new Center( | |
child: new Text( | |
_items[index], | |
style: | |
TextStyle(fontSize: _fontSize, color: Colors.black), | |
)); | |
}), | |
), | |
), | |
), | |
), | |
) | |
: DropdownButton<String>( | |
value: selection, | |
items: _items | |
.map( | |
(String item) => DropdownMenuItem<String>( | |
value: item, | |
child: SizedBox( | |
width: 200.0, | |
child: Text( | |
item, | |
style: TextStyle( | |
fontSize: _fontSize, | |
color: _isDarkTheme | |
? Colors.white | |
: Colors.black), | |
))), | |
) | |
.toList(), | |
onChanged: (s) { | |
setState(() { | |
selection = s; | |
}); | |
}); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
body: ListTile( | |
leading: Icon(Icons.info), | |
title: const Text('Select a Result'), | |
subtitle: Platform.isIOS | |
? Text( | |
selection, | |
style: TextStyle( | |
fontSize: _fontSize, | |
color: _isDarkTheme ? Colors.white : Colors.black), | |
) | |
: _buildNativePicker(), | |
trailing: _items.length == 1 ? NativeLoadingIndicator() : Text(''), | |
onTap: !Platform.isIOS | |
? null | |
: () async { | |
await showModalBottomSheet<void>( | |
context: context, | |
builder: (BuildContext context) { | |
return _buildNativePicker(); | |
}, | |
); | |
}, | |
)); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment