Flutter의 커스텀 스테퍼

Stepper는 작은 UI 구성 요소이지만 응용 프로그램 개발에서 값을 늘리거나 줄이는 데 가장 유용한 구성 요소입니다. 사람들은 카운터라고도 부르지만 저는 iOS 개발 배경에서 왔기 때문에 이것을 스테퍼가 있다고 부릅니다.

스테퍼란 무엇입니까?

스테퍼는 증분 값을 늘리거나 줄이는 데 사용되는 두 개의 버튼입니다. 기본적으로 스테퍼의 한 버튼은 더하기 기호를 표시하고 다른 버튼은 빼기 기호를 표시합니다. 원하는 경우 이러한 기호를 사용자 지정 이미지로 바꿀 수 있습니다.

다음과 같이 캐러셀을 만들어 봅시다.

이것은 실제로 이 기사의 끝에서 만들 것입니다. 에너지를 충전하고 시작합시다.

둥근아이콘버튼

class RoundedIconButton extends StatelessWidget {
  RoundedIconButton({@required this.icon, @required this.onPress, @required this.iconSize});

  final IconData icon;
  final Function onPress;
  final double iconSize;

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      constraints: BoxConstraints.tightFor(width: iconSize, height: iconSize),
      elevation: 6.0,
      onPressed: onPress,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(iconSize*0.2)),
      fillColor: Color(0xFF65A34A),
      child: Icon(
        icon,
        color: Colors.white,
        size: iconSize * 0.8,
      ),
    );
  }
}

StatelessWidget 클래스를 만들고 이름을 RoundedIconButton로 지정합니다.

다음 속성을 선언합니다.

  final IconData icon;
  final Function onPress;
  final double iconSize;

icon는 IconData에 대한 문자열을 전달할 수 없기 때문에 icon name 데이터 유형입니다.

onPress 속성은 버튼의 기능을 작성하는 데 도움이 됩니다.

iconSize는 버튼을 더 동적으로 만들기 위한 것입니다.

RawMaterialButton , constraints 및 elevation 등과 같이 위에서 볼 수 있는 공통 속성이 있는 child를 반환합니다.

맞춤형 스테퍼

StatelessWidget를 만들고 이름을 CustomStepper로 지정합니다. 클래스의 속성, 즉 값을 늘리거나 줄이는 경우가 많기 때문에 StatelessWidget가 필요합니다.

// ignore: must_be_immutable
class CustomStepper extends StatefulWidget {
  CustomStepper({
    @required this.lowerLimit,
    @required this.upperLimit,
    @required this.stepValue,
    @required this.iconSize,
    @required this.value,
  });

  final int lowerLimit;
  final int upperLimit;
  final int stepValue;
  final double iconSize;
  int value;

  @override
  _CustomStepperState createState() => _CustomStepperState();
}

class _CustomStepperState extends State<CustomStepper> {

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RoundedIconButton(
          icon: Icons.remove,
          iconSize: widget.iconSize,
          onPress: () {
            setState(() {
              widget.value =
                  widget.value == widget.lowerLimit ? widget.lowerLimit : widget.value -= widget.stepValue;
            });
          },
        ),
        Container(
          width: widget.iconSize,
          child: Text(
            '${widget.value}',
            style: TextStyle(
              fontSize: widget.iconSize * 0.8,
            ),
            textAlign: TextAlign.center,
          ),
        ),
        RoundedIconButton(
          icon: Icons.add,
          iconSize: widget.iconSize,
          onPress: () {
            setState(() {
              widget.value =
                  widget.value == widget.upperLimit ? widget.upperLimit : widget.value += widget.stepValue;
            });
          },
        ),
      ],
    );
  }
}

다음 속성을 선언합니다.

lowerLimit 속성은 스테퍼의 하한을 업데이트할 수 있는 곳입니다.

upperLimit 속성은 스테퍼의 상한을 업데이트할 수 있는 곳입니다.

stepValue 속성은 스테퍼의 각 단계 값을 업데이트할 수 있는 곳입니다.

iconSize 스테퍼의 전체 구조를 관리하는 속성입니다.

value 속성은 RoundedIconButton를 클릭할 때마다 업데이트됩니다.

다음 단계에 따라 CustomStepper를 만듭니다.

Row ~ MainAxisAlignment로 center 만들기

RoundedIconButton , add 아이콘 및 기능을 전달하는 두 개의 remove 를 추가합니다.

기능:

value를 클릭하면 stepValue가 addButton만큼 증가합니다.

value를 클릭하면 stepValue가 removeButton만큼 감소합니다.

Ternary Operator이 이 경우에 가장 적합합니다.

value 속성에 텍스트 레이블을 지정하고 아이콘 사이에 배치합니다.

여기에 실제 CustomStepper가 표시됩니다.

사용 사례 예

class StepperScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      backgroundColor: kPrimaryColor,
      title: Text("Custom Stepper"),
      centerTitle: false,
      ),
      body: SafeArea(
        child: Center(
          child: Container(
            height: 300,
                width: 200,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8.0),
                  boxShadow: [
                    BoxShadow(
                      color: kShadowColor,
                      offset: Offset(0, 20),
                      blurRadius: 30.0),
                  ]
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.black.withOpacity(0.04),
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Image.asset('assets/images/fruit.png',fit: BoxFit.fitWidth,),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 8.0,left: 8.0),
                child: Text('Juicy Strawberry',style: TextStyle(
                  color: Colors.black,
                  fontSize: 18.0,
                ),),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 8.0,left: 8.0),
                child: Row(
                  children: [
                   Text('\$20.40',style: TextStyle(
                     color: Colors.black,
                     fontSize: 15.0,
                     fontWeight: FontWeight.bold,
                   ),), 
                Spacer(),
                CustomStepper()
                  ],
                ),
              ),

            ],
        ),
          )),
      ),
    );
  }
}

CustomStepper를 통해 항목의 수량을 추가할 수 있는 식료품 카트의 간단한 예를 사용했습니다.

결론

스테퍼는 값을 쉽게 늘리고 줄이는 데 도움이 됩니다. 예를 들어 하루에 몇 시간 자나요?와 같은 작은 값에는 스테퍼를 사용하세요. 반면에 스테퍼를 사용하여 하루에 몇 마일을 이동하는 것은 이치에 맞지 않습니다.

GitHub Link

앱 개발 기술을 향상하고 싶다면 Flutter 및 SwiftUI에서 더욱 향상하십시오. 추가 팁이나 피드백이 있으면 언제든지 저에게 DM을 보내거나 저에게 트윗을 보내주세요.

읽어 주셔서 감사합니다!