NumberPickerとは？
スワイプして数値を選択する機能です。
numberpicker.dartをダウンロードする
下記のHPに行って右のRepositoryからソースコードのzipをダウンロードして解凍します。ちなみにBSDライセンスだそうです。
解凍してできたnumberpicker.dartを自分のFlutterプロジェクトのlibの下にコピーします。
pubspec.yaml
infinite_listview: ^1.0.0を追加します。
|
1 2 3 4 5 6 7 8 |
dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2 infinite_listview: ^1.0.0 |
main.dart (整数)
整数のNumberPickerです。
numberpicker.dartをインポートしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
import 'package:flutter/material.dart'; import 'package:number_picker_main/numberpicker.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or simply save your changes to "hot reload" in a Flutter IDE). // Notice that the counter didn't reset back to zero; the application // is not restarted. primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); // This widget is the home page of your application. It is stateful, meaning // that it has a State object (defined below) that contains fields that affect // how it looks. // This class is the configuration for the state. It holds the values (in this // case the title) provided by the parent (in this case the App widget) and // used by the build method of the State. Fields in a Widget subclass are // always marked "final". final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _currentValue = 1; @override Widget build(BuildContext context) { return new Scaffold( body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new NumberPicker.integer( initialValue: _currentValue, minValue: 0, maxValue: 100, onChanged: (newValue) => setState(() => _currentValue = newValue)), new Text("Current number: $_currentValue"), ], ), ), appBar: new AppBar( title: new Text(widget.title), ), ); } } |
main.dart (小数)
小数のNumberPickerです。整数部と小数部のそれぞれをNumberPickerで設定できます。
numberpicker.dartをインポートしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
import 'package:flutter/material.dart'; import 'package:number_picker/numberpicker.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or simply save your changes to "hot reload" in a Flutter IDE). // Notice that the counter didn't reset back to zero; the application // is not restarted. primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); // This widget is the home page of your application. It is stateful, meaning // that it has a State object (defined below) that contains fields that affect // how it looks. // This class is the configuration for the state. It holds the values (in this // case the title) provided by the parent (in this case the App widget) and // used by the build method of the State. Fields in a Widget subclass are // always marked "final". final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { double _currentPrice = 1.0; void _showDialog() { showDialog<double>( context: context, builder: (BuildContext context) { return new NumberPickerDialog.decimal( minValue: 1, maxValue: 10, title: new Text("Pick a new price"), initialDoubleValue: _currentPrice, ); } ).then((double value) { if (value != null) { setState(() => _currentPrice = value); } }); } @override Widget build(BuildContext context) { return new Scaffold( body: new Center( child: new Text("Current price: $_currentPrice \$"), ), appBar: new AppBar( title: new Text(widget.title), ), floatingActionButton: new FloatingActionButton( child: new Icon(Icons.attach_money), onPressed: _showDialog, ), ); } } |
