// dog_detail_page.dart

class _DogDetailPageState extends State<DogDetailPage> {
  final double dogAvatarSize = 150.0;
  // slider의 초기값
  double _sliderValue = 10.0;

  // ...

  Widget get addYourRating {
    return Column(
      children: <Widget>[
        Container(
          padding: EdgeInsets.symmetric(
            vertical: 16.0,
            horizontal: 16.0,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              // row, column, listvie, 기타 등에서 Flexbile(유연한) 위젯은
              // CSS의 flex-grow속성과 매우 유사하게 작동하는 래퍼(wrapper)다.
              Flexible(
                flex: 1,
                // 많은 폼 요소와 마찬가지로 slider는 자체 값을 알고 그 값을 업데이트하는 방법을 알야야함.
                //
                // slider는 값이 변경될때 onChanged가 호출 되지만,
                // 오직 setState를 사용하여 state의 value속성이 변경될때만 다시 그린다.
                //
                // The workflow is:
                // 작동흐름은
                // 1. 사용자가 slider를 드래그(drag)한다.
                // 2. onChanged가 호출된다.
                // 3. onChanged의 콜백이 sliderValue state를 설정한다.
                // 4. 플러터는 SliderValue에 의존하는 모든것을 다시 그린다.
                // 이 경우에는 slidera만 새로운 값으로 변경한다.
                child: Slider(
                  activeColor: Colors.indigoAccent,
                  min: 0.0,
                  max: 15.0,
                  onChanged: (newRating) {
                    setState(() => _sliderValue = newRating);
                  },
                  value: _sliderValue,
                ),
              ),
              
              // slider의 값을 표시하는 부분.
              Container(
                width: 50.0,
                alignment: Alignment.center,
                child: Text('${_sliderValue.toInt()}',
                    style: Theme.of(context).textTheme.display1),
              ),
            ],
          ),
        ),
        submitRatingButton,
      ],
    );
  }

  // 현재로선 아무것도 하는게 없는 간단한 Raised 버튼.
  Widget get submitRatingButton {
    return RaisedButton(
      onPressed: () => print('pressed!'),
      child: Text('Submit'),
      color: Colors.indigoAccent,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black87,
      appBar: AppBar(
        backgroundColor: Colors.black87,
        title: Text('Meet ${widget.dog.name}'),
      ),
      // Make the body a ListView that displays
      // both the profile and the rating form.
      // body를 프로필(profile)과 평가 폼 두개를 모두 표시하는 ListView로 만든다.
      body: ListView(
        children: <Widget>[dogProfile, addYourRating],
      ),
    );
  }
}

// dog_detail_page.dart

// 다음 섹션에서 여러분은 error 처리를 추가할 것이지만,
// 지금은 이것이 전부 이다.
void updateRating() {
  setState(() => widget.dog.rating = _sliderValue.toInt());
}

// dog_detail_page.dart

Widget get submitRatingButton {
  return RaisedButton(
    onPressed: updateRating,
    child: Text('Submit'),
    color: Colors.indigoAccent,
  );
}