Your first Flutter app  |  Google Codelabs

현재 앱의 모습은 다음과 같습니다.

좋지 않습니다. 앱의 핵심인 무작위로 생성된 단어 쌍이 더 눈에 잘 띄어야 합니다. 사용자들이 이 앱을 사용하는 주된 이유이기 때문입니다! 또한 앱 콘텐츠가 이상하게 중앙에서 벗어나 있고 앱 전체가 지루할 정도로 흑백입니다.

이 섹션에서는 앱 디자인 작업을 통해 이러한 문제를 해결합니다. 이 섹션의 최종 목표는 다음과 같습니다:

위젯 추출

현재 단어 쌍을 표시하는 줄은 이제 다음과 같이 보입니다: Text(appState.current.asLowerCase). 이를 좀 더 복잡한 것으로 변경하려면 이 줄을 별도의 위젯으로 추출하는 것이 좋습니다. UI의 논리적 부분을 위한 별도의 위젯을 만드는 것은 Flutter에서 복잡성을 관리하는 중요한 방법입니다.

Flutter는 위젯 추출을 위한 리팩터링 헬퍼를 제공하지만 사용하기 전에 추출되는 라인이 필요한 부분에만 액세스하는지 확인해야 합니다. 지금 이 줄은 appState에 액세스하지만 실제로는 현재 단어 쌍이 무엇인지만 알면 됩니다.

따라서 다음과 같이 MyHomePage 위젯을 다시 작성하세요:

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();  
    var pair = appState.current;                 // ← Add this.

    return Scaffold(
      body: Column(
        children: [
          Text('A random AWESOME idea:'),
          Text(pair.asLowerCase),                // ← Change to this.
          ElevatedButton(
            onPressed: () {
              appState.getNext();
            },
            child: Text('Next'),
          ),
        ],
      ),
    );
  }
}

// ...

멋지네요. Text 위젯이 더 이상 전체 appState를 참조하지 않습니다.

이제 리팩터링 메뉴를 불러옵니다. VS Code에서는 두 가지 방법 중 하나로 이 작업을 수행합니다: