[Flutter] 7. Flutter Widget (Expanded, GestureDetector, Slider)

Expanded

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Expanded Column Sample'),
    ),
    body: Center(
       child: Column(
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
          Expanded(
            child: Container(
              color: Colors.amber,
              width: 100,
            ),
          ),
          Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
        ],
      ),
    ),
  );
}

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Expanded Row Sample'),
    ),
    body: Center(
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.amber,
              height: 100,
            ),
          ),
          Container(
            color: Colors.blue,
            height: 100,
            width: 50,
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.amber,
              height: 100,
            ),
          ),
        ],
      ),
    ),
  );
}

GestureDetector

GestureDetector(
  onTap: () {
    setState(() { _lights = true; });
  },
  child: Container(
    color: Colors.yellow,
    child: Text('TURN LIGHTS ON'),
  ),
)

GestureDetector({Key key, Widget child, GestureTapDownCallback onTapDown, GestureTapUpCallback onTapUp, GestureTapCallback onTap, GestureTapCancelCallback onTapCancel, GestureTapDownCallback onSecondaryTapDown, GestureTapUpCallback onSecondaryTapUp, GestureTapCancelCallback onSecondaryTapCancel, GestureTapCallback onDoubleTap, GestureLongPressCallback onLongPress, GestureLongPressStartCallback onLongPressStart, GestureLongPressMoveUpdateCallback onLongPressMoveUpdate, GestureLongPressUpCallback onLongPressUp, GestureLongPressEndCallback onLongPressEnd, GestureDragDownCallback onVerticalDragDown, GestureDragStartCallback onVerticalDragStart, GestureDragUpdateCallback onVerticalDragUpdate, GestureDragEndCallback onVerticalDragEnd, GestureDragCancelCallback onVerticalDragCancel, GestureDragDownCallback onHorizontalDragDown, GestureDragStartCallback onHorizontalDragStart, GestureDragUpdateCallback onHorizontalDragUpdate, GestureDragEndCallback onHorizontalDragEnd, GestureDragCancelCallback onHorizontalDragCancel, GestureForcePressStartCallback onForcePressStart, GestureForcePressPeakCallback onForcePressPeak, GestureForcePressUpdateCallback onForcePressUpdate, GestureForcePressEndCallback onForcePressEnd, GestureDragDownCallback onPanDown, GestureDragStartCallback onPanStart, GestureDragUpdateCallback onPanUpdate, GestureDragEndCallback onPanEnd, GestureDragCancelCallback onPanCancel, GestureScaleStartCallback onScaleStart, GestureScaleUpdateCallback onScaleUpdate, GestureScaleEndCallback onScaleEnd, HitTestBehavior behavior, bool excludeFromSemantics: false, DragStartBehavior dragStartBehavior: DragStartBehavior.start })

Slider

• thumb : 유저가 드래그하게 되는 부분. 주로 색칠된 원, 또는 막대
• track : thumb이 움직일 수 있는 선
• value indicator : 유저가 thumb을 드래그할 때 thumb이 현재 어떤 값을 가리키는지 알려주는 모양
• active side : 슬라이더의 최소값 부터 현재 thumb이 있는 값 사이 구간
• inactive side : 현재 thumb이 있는 값에서 부터 슬라이더의 최대 값 사이의 구간

Slider({Key key, @required double value, @required ValueChanged<double> onChanged, ValueChanged<double> onChangeStart, ValueChanged<double> onChangeEnd, double min: 0.0, double max: 1.0, int divisions, String label, Color activeColor, Color inactiveColor, SemanticFormatterCallback semanticFormatterCallback })

Slider(
  value: _duelCommandment.toDouble(),
  min: 1.0,
  max: 10.0,
  divisions: 10,
  label: '$_duelCommandment',
  onChanged: (double newValue) {
    setState(() {
      _duelCommandment = newValue.round();
    });
  },
)

참조