[TAVE/8thStudy] Do it! Flutter 3장 플러터 내부 구조 살펴보기①

210919 일

플러터 앱의 위젯

1. 스테이트리스(stateless): 상태를 연결할 필요가 없다. StatelessWidget 클래스를 상속 받아 만든다.
2. 스테이트풀(statefull): 내용 갱신이 필요하다. 위젯이 특정 상태가 되면 알맞은 처리가 필요하다. StatefulWidget 클래스를 상속받는다.

 

 

데모 앱 수정

 

📌 Ctrl+\(핫 리로드 기능): 바뀐 코드가 적용된다.

📌 Ctrl+Alt+L: 코드가 자동으로 정렬된다.

home: Container(
  color: Colors.white,
  child: Center(
    child: Text(
      'hello\nFlutter', 
      textAlign: TextAlign.center,
      style: TextStyle(color: Colors.blue, fontSize: 20),
    )));

✍🏻 Container: 특정 공간을 책임지는 위젯

✍🏻 child, children: 자신 아래 어떤 위젯을 넣겠다는 의미

✍🏻 Center: 어떠한 것을 한 가운데에 위치 시킴

 

 

스위치 달기

 

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyApp();
  }
}
class _MyApp extends State<MyApp>{
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        darkTheme: ThemeData.light(),
        home: Scaffold(
          body: Center(
            child: Switch(
                value: switchValue,
                onChanged: (value) {
                  setState((){
                    print(value);
                    switchValue = value;
                  });
                }),
          ),
        ));
  }
}

👉🏻 Scaffold 클래스: 앱에 머티리얼 디자인 적용한다.(여기서는 스위치 구성)

✍🏻 _MyApp의 언더스코어: 내부에서만 사용할 수 있다는 것을 의미한다.

✍🏻 setState(): 변숫값이 바뀌면 이 사실을 앱에 알려 화면을 갱신한다.

 

 

버튼 눌러 텍스트 바꾸기

 

class _MyApp extends State<MyApp> {
  var switchValue = false;
  String test = 'hello';
  Color _color = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        darkTheme: ThemeData.light(),
        home: Scaffold(
          body: Center(
            child: ElevatedButton(
                child: Text('$test'),
                style: ButtonStyle (
                  backgroundColor: MaterialStateProperty.all(_color)),
                )
                onPressed: () {
                  if (_color == Colors.blue) {
                    setState(() {
                      test = 'flutter';
                      _color = Colors.amber;
                    });
                  } else {
                    setState(() {
                      test = 'flutter';
                      _color = Colors.blue;
                    });
                  }
                })),
        ));
  }
}

👉🏻 ElevatedButton 위젯: 버튼 만들 때 사용한다.