[Flutter] Horizontal Number Picker

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  numberpicker

 

 

 

NumberPicker 구현

NumberPicker(
   value: _currentHorizontalIntValue,
   minValue: _minValue,
   maxValue: _maxValue,
   step: 1,
   itemHeight: 100,
   axis: Axis.horizontal,
   onChanged: (value) => setState(() => _currentHorizontalIntValue = value),
)

 

 

 

현재 pick한 number 보여주기

Text(
   _currentHorizontalIntValue.toString(),
   style: TextStyle(
      fontSize: 40,
      fontWeight: FontWeight.bold
   ),
)

 

 

 

- 버튼, +버튼 구현

IconButton(
   icon: Icon(Icons.remove),
   onPressed: () => setState(() {
      final newValue = _currentHorizontalIntValue - 10;
      _currentHorizontalIntValue = newValue.clamp(_minValue, _maxValue);
   }),
),
IconButton(
   icon: Icon(Icons.add),
   onPressed: () => setState(() {
      final newValue = _currentHorizontalIntValue + 10;
      _currentHorizontalIntValue = newValue.clamp(_minValue, _maxValue);
   }),
)

 

 

 

결과

 

 

 

 

최종 코드

import 'package:flutter/material.dart';
import 'package:numberpicker/numberpicker.dart';

void main() {
  runApp(new ExampleApp());
}

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NumberPicker Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Numberpicker example'),
        ),
        body: _IntegerExample(),
      ),
    );
  }
}

class _IntegerExample extends StatefulWidget {
  @override
  __IntegerExampleState createState() => __IntegerExampleState();
}

class __IntegerExampleState extends State<_IntegerExample> {
  int _currentHorizontalIntValue = 150;
  final int _maxValue = 250;
  final int _minValue = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        SizedBox(height: 16),
        Text(
            _currentHorizontalIntValue.toString(),
          style: TextStyle(
            fontSize: 40,
            fontWeight: FontWeight.bold
          ),
        ),
        NumberPicker(
          value: _currentHorizontalIntValue,
          minValue: _minValue,
          maxValue: _maxValue,
          step: 1,
          itemHeight: 100,
          axis: Axis.horizontal,
          onChanged: (value) =>
              setState(() => _currentHorizontalIntValue = value),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              icon: Icon(Icons.remove),
              onPressed: () => setState(() {
                final newValue = _currentHorizontalIntValue - 10;
                _currentHorizontalIntValue = newValue.clamp(_minValue, _maxValue);
              }),
            ),
            Text(' '),
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () => setState(() {
                final newValue = _currentHorizontalIntValue + 10;
                _currentHorizontalIntValue = newValue.clamp(_minValue, _maxValue);
              }),
            ),
          ],
        ),
      ],
    );
  }
}