01/20/수 - Tutorials Interactive

해당 과정은 https://flutter-ko.dev/docs/development/ui/interactive에서 만나볼 수 있습니다.

Adding interactivity to your Flutter app

 

Flutter 앱에 상호 작용 추가

사용자 입력에 반응하도록 앱을 어떻게 수정합니까? 이 자습서에서는 비대화 형 위젯 만 포함 된 앱에 대화 형 기능을 추가합니다. 특히 두 개의 상태 비 저장 위젯을 관리하는 사용자 지정 상태 저장 위젯을 만들어서 탭할 수 있도록 아이콘을 수정합니다.

레이아웃 튜토리얼 은 다음 스크린 샷의 레이아웃을 만드는 방법을 보여주었습니다.

---

앱이 처음 실행되면 별이 빨간색으로 표시되어이 호수가 이전에 즐겨찾기 되었음을 나타냅니다. 별 옆에 있는 숫자는 41명이 호수를 즐겨찾기했음을 나타냅니다. 이 튜토리얼을 완료 한 후 별을 탭하면 즐겨찾기 상태가 제거되고 단색 별이 윤곽선으로 바뀌고 개수가 감소합니다. 다시 탭하면 호수를 즐겨찾기하고 단색 별을 그리며 개수를 늘립니다.

이를 수행하기 위해 자체 위젯 인 별과 개수를 모두 포함하는 단일 사용자 정의 위젯을 만듭니다. 별표를 탭하면 두 위젯의 상태가 변경되므로 동일한 위젯이 둘 다 관리해야합니다.

Step 2: StatefulWidget 하위 클래스 에서 코드를 직접 만질 수 있습니다 . 상태를 관리하는 다른 방법을 시도하려면 상태 관리로 건너 뜁니다.

 

Stateful and stateless widgets

위젯은 Stateful 또는 Stateless입니다. 위젯이 변경 될 수있는 경우 (예 : 사용자가 상호 작용할 때) Stateful입니다.

Stateless 위젯은 절대 변하지 않습니다. Icon , IconButton 및 Text 는 Stateless 위젯의 예입니다. Stateless 위젯 서브 클래스 StatelessWidget .

Stateful 위젯은 동적이다 : 예를 들어, 사용자 상호 작용 또는 데이터를 수신 할 때 트리거 이벤트에 응답하여 그것의 외관을 변경할 수있다. Checkbox , Radio , Slider , InkWell , Form 및 TextField 는 Stateful 위젯의 예입니다. Stateful 위젯 하위 클래스 StatefulWidget .

위젯의 State는 State 개체에 저장되어 위젯의 상태와 모양을 구분합니다. State는 슬라이더의 현재 값 또는 확인란 선택 여부와 같이 변경할 수있는 값으로 구성됩니다. 위젯의 상태가 변경되면 상태 객체는를 호출 setState()하여 프레임 워크에 위젯을 다시 그리도록 지시합니다.

 

Step 0: Get ready

If you’ve already built the app in Layout tutorial (step 6), skip to the next section.

Layout tutorial (step 6) 을 이미 완료한 상태라면 스킵해도 된다.

Make sure you’ve set up your environment.
Create a basic “Hello World” Flutter app.
Replace the lib/main.dart file with main.dart.
Replace the pubspec.yaml file with pubspec.yaml.
Create an images directory in your project, and add lake.jpg.

Once you have a connected and enabled device, or you’ve launched the iOS simulator (part of the Flutter install), you are good to go!

 

Step 1: Decide which object manages the widget’s state

A widget’s state can be managed in several ways, but in our example the widget itself, FavoriteWidget, will manage its own state. In this example, toggling the star is an isolated action that doesn’t affect the parent widget or the rest of the UI, so the widget can handle its state internally.

위젯의 상태는 여러 가지 방법으로 관리 할 수 ​​있지만 이번 예제에서는 위젯 자체 FavoriteWidget가 자체 상태를 관리합니다. 이 예제에서 별표 토글은 상위 위젯이나 나머지 UI에 영향을주지 않는 격리 된 작업이므로 위젯이 내부적으로 상태를 처리 할 수 ​​있습니다.

더 알아보기 about the separation of widget and state, and how state might be managed, in Managing state.

​

Step 2: Subclass StatefulWidget

The FavoriteWidget class manages its own state, so it overrides createState() to create a State object. The framework calls createState() when it wants to build the widget. In this example, createState() returns an instance of _FavoriteWidgetState, which you’ll implement in the next step.

FavoriteWidget class는 자신의 state에 관리되어서 createState()로 State개체를 override한다. framework는 createState()를 위젯-빌드할 때 호출합니다 . 이 예제에서는 createState()는 다음 단계에서 구현할 _FavoriteWidgetState를 대신해서 반환합니다.

class FavoriteWidget extends StatefulWidget {
  @override
  _FavoriteWidgetState createState() => _FavoriteWidgetState();
}

 

Step 3: Subclass State

The _FavoriteWidgetState class stores the mutable data that can change over the lifetime of the widget. When the app first launches, the UI displays a solid red star, indicating that the lake has “favorite” status, along with 41 likes. These values are stored in the _isFavorited and _favoriteCount fields:

이 _FavoriteWidgetState클래스는 위젯의 수명동안 변경될 수있는 변경 가능한 데이터를 저장합니다. 앱이 처음 실행되면 UI에 빨간색 별표가 표시되어 호수가 41 개의 좋아요와 함께 "즐겨 찾기"상태임을 나타냅니다. 이러한 값은 _isFavorited및 _favoriteCount필드에 저장 됩니다.

class _FavoriteWidgetState extends State<FavoriteWidget> {
  bool _isFavorited = true;
  int _favoriteCount = 41;
  // ···
}

 

The class also defines a build() method, which creates a row containing a red IconButton, and Text. You use IconButton (instead of Icon) because it has an onPressed property that defines the callback function (_toggleFavorite) for handling a tap. You’ll define the callback function next.

이 클래스는 또한 red IconButton과 Text을 포함하는 row을 생성하는 build() method로 정의한다. 탭을 처리하기위한 콜백 함수(_toggleFavorite)를 정의하는 onPressed property가 있기 때문에 IconButton(Icon)을 사용한다. 다음에 콜백 함수를 정의합니다.

class _FavoriteWidgetState extends State<FavoriteWidget> {
  // ···
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          padding: EdgeInsets.all(0),
          child: IconButton(
            icon: (_isFavorited ? Icon(Icons.star) : Icon(Icons.star_border)),
            color: Colors.red[500],
            onPressed: _toggleFavorite,
          ),
        ),
        SizedBox(
          width: 18,
          child: Container(
            child: Text('$_favoriteCount'),
          ),
        ),
      ],
    );
  }
}

The _toggleFavorite() method, which is called when the IconButton is pressed, calls setState(). Calling setState() is critical, because this tells the framework that the widget’s state has changed and that the widget should be redrawn. The function argument to setState() toggles the UI between these two states:

IconButton이 눌릴 때 호출되는 _toggleFavorite() method는 setState()로 부릅니다. 호출한 setState()은 위젯의 상태가 변경되었으며 위젯을 다시 그려야 함을 프레임 워크에 알려주기 때문에 중요합니다. 함수 인수 setState()는 다음 두 상태간에 UI 를 전환합니다.

A star icon and the number 41
A star_border icon and the number 40
그래서 _favoriteCount의 초기값이 41으로 설정해 둔것 같다.

void _toggleFavorite() {
  setState(() {
    if (_isFavorited) {
      _favoriteCount -= 1;
      _isFavorited = false;
    } else {
      _favoriteCount += 1;
      _isFavorited = true;
    }
  });
}

 

 

Step 4: Plug the stateful widget into the widget tree

Add your custom stateful widget to the widget tree in the app’s build() method. First, locate the code that creates the Icon and Text, and delete it. In the same location, create the stateful widget:

앱의 build() method의 widget tree에 사용자 지정 stateful 위젯을 추가합니다 . 첫째, Icon과 Text를 생성하고, 삭제하는 코드를 정합니다. 동일한 위치에서 stateful 위젯을 만듭니다.

 ​

처음에는 Dart라는 새로운 언어를 익혀야한다는 부담감이 있었지만, 이렇게 보니깐 약간 HTML, Css, Js로 웹을 디자인 하는 것이나 java로 코딩하는 것과 유사하다는 느낌을 많이 받았다. 물론 아직 어색하기는 하지만 아예 이해를 못할 정도는 아닌 것 같다.

---

모든 진행 과정은 github를 통해 볼 수 있습니다.

미숙한 번역실력으로 작성해 봤습니다. 오류나 정정 댓글은 언제나 환영입니다.

​

https://github.com/gurcks8989/Flutter/tree/master/layout

gurcks8989/Flutter

 

아래 링크는 해당 과정에 있었던 전체 코드입니다.​

https://github.com/gurcks8989/Flutter/blob/252adeabbb88ce7f8141e33ad589c645d87f94ee/layout/lib/main.dart

gurcks8989/Flutter