2019年12月11日 (水) 09:43にAdminによる

2019-12-11T09:43:52Z

← 古い版		2019年12月11日 (水) 09:43時点における版
125行目:		125行目:
	const double _kPickerItemHeight = 32.0;		const double _kPickerItemHeight = 32.0;
	</pre>		</pre>

			以下flutterについてるexampleから抜粋。

			flutter_gallery/lib/demo/cupertino/cupertino_picker_demo.dart

Admin: /* サンプル */

2019-12-11T09:40:45Z

サンプル

← 古い版		2019年12月11日 (水) 09:40時点における版
1行目:		1行目:
	==サンプル==		==サンプル==
			<pre>
	class HogePageState extends State<HogePage> {		class HogePageState extends State<HogePage> {
	int _selectedColorIndex = 1;		int _selectedColorIndex = 1;

Admin: ページの作成:「==サンプル== class HogePageState extends State { int _selectedColorIndex = 1; @override Widget build(BuildContext context) { return Scaffold(...」

2019-12-11T09:26:57Z

ページの作成:「==サンプル== class HogePageState extends State<HogePage> { int _selectedColorIndex = 1; @override Widget build(BuildContext context) { return Scaffold(...」

新規ページ

==サンプル==
class HogePageState extends State<HogePage> {
int _selectedColorIndex = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
body: _buildColorPicker(context), // 任意の場所に追加
);
}
Widget _buildColorPicker(BuildContext context) {
const List<String> coolColorNames = <String>[
'Sarcoline', 'Coquelicot', 'Smaragdine', 'Mikado', 'Glaucous', 'Wenge',
'Fulvous', 'Xanadu', 'Falu', 'Eburnean', 'Amaranth', 'Australien',
'Banan', 'Falu', 'Gingerline', 'Incarnadine', 'Labrador', 'Nattier',
'Pervenche', 'Sinoper', 'Verditer', 'Watchet', 'Zaffre',
];
final FixedExtentScrollController scrollController =
FixedExtentScrollController(initialItem: _selectedColorIndex);
return GestureDetector(
onTap: () async {
await showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) {
return _BottomPicker(
child: CupertinoPicker(
scrollController: scrollController,
itemExtent: _kPickerItemHeight,
backgroundColor: CupertinoColors.systemBackground.resolveFrom(
context),
onSelectedItemChanged: (int index) {
setState(() => _selectedColorIndex = index);
},
children: List<Widget>.generate(
coolColorNames.length, (int index) {
return Center(
child: Text(coolColorNames[index]),
);
}),
),
);
},
);
},
child: _Menu(
children: <Widget>[
const Text('Favorite Color'),
Text(
coolColorNames[_selectedColorIndex],
style: TextStyle(color: CupertinoDynamicColor.resolve(
CupertinoColors.inactiveGray, context)),
),
],
),
);
}
}
class _Menu extends StatelessWidget {
const _Menu({
Key key,
@required this.children,
}) : assert(children != null),
super(key: key);

final List<Widget> children;

@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: CupertinoTheme.of(context).scaffoldBackgroundColor,
border: const Border(
top: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
bottom: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
),
),
height: 44.0,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: SafeArea(
top: false,
bottom: false,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: children,
),
),
),
);
}
}
class _BottomPicker extends StatelessWidget {
const _BottomPicker({
Key key,
@required this.child,
}) : assert(child != null),
super(key: key);

final Widget child;

@override
Widget build(BuildContext context) {
return Container(
height: _kPickerSheetHeight,
padding: const EdgeInsets.only(top: 6.0),
color: CupertinoColors.systemBackground.resolveFrom(context),
child: DefaultTextStyle(
style: TextStyle(
color: CupertinoColors.label.resolveFrom(context),
fontSize: 22.0,
),
child: GestureDetector(
// Blocks taps from propagating to the modal sheet and popping.
onTap: () { },
child: SafeArea(
top: false,
child: child,
),
),
),
);
}
}
const double _kPickerSheetHeight = 216.0;
const double _kPickerItemHeight = 32.0;
</pre>

Flutter/UI/Cupertino/CupertinoPicker - 版の履歴

2019年12月11日 (水) 09:43にAdminによる

Admin: /* サンプル */

Admin: ページの作成:「==サンプル== class HogePageState extends State { int _selectedColorIndex = 1; @override Widget build(BuildContext context) { return Scaffold(...」