Skip to content

Instantly share code, notes, and snippets.

@rodydavis
Last active June 30, 2018 01:27
Show Gist options
  • Save rodydavis/3b001ec00945d4ed0f9a7a52915e01ec to your computer and use it in GitHub Desktop.
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
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