04-Flutter 첫 번째 Flutter 앱 (2)

https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ko#4

첫 번째 Flutter 앱  |  Google Codelabs

여기서부터 이어서 진행하려고 한다. 우선 초기 상태에서 주어졌던 center alignment와 floatingActionButton을 제거하고 시작을 하려고 한다. 또한, 우상단의 DEBUG 표시가 거슬렸기에 MaterialApp에 debugShowCheckedModeBanner를 false로 설정해주면

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const MyHomePage(),
      )
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

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

이제 이런 식으로 화면에 표시된다. 

Refactor 메뉴를 건드려보자. Refactor를 진행하려는 곳에 커서를 두고 우클릭을 하면 Refactor 창이 보이게 된다. 해당 창에서 Extract Flutter Widget을 사용해서 위젯을 추출해보자. 이름은 BigCard로 진행한다.

class BigCard extends StatelessWidget {
  const BigCard({
    super.key,
    required this.pair,
  });

  final WordPair pair;

  @override
  Widget build(BuildContext context) {
    return Text(pair.asLowerCase);
  }
}

Text 앞에 커서를 놓고 Alt+Enter를 눌러주고 Wrap with Padding을 선택해주자. Padding값을 8.0에서 20.0까지 늘려주면 사이 공간이 늘어난 것을 확인 할 수 있다.

 

이번에는 Padding앞에 커서를 놓고 Alt+Enter를 눌러주고 Wrap with Widget을 선택해주자. 이렇게 하면 상위 위젯을 지정할 수 있고, 상위 위젯으로 'Card'를 입력해주면 아래와 같은 모습이 된다.