Flutter 로 웹툰 앱 만들기 – 노마드 코더 Nomad Coders

• 기본 코드

Widget catalog

#3. Hello World

• home에 Text

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Text('Hello world!'),
    );
  }
}

• 루트는 MaterialApp(google)
  • home: 위젯을 리턴해야 하는 프로퍼티

• Scaffold 안에 body 추가

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Text('Hello world!'),
      ),
    );
  }
}

• Scaffold: 화면의 구성 및 구조에 대한 것들을 가지고 있는 위젯
  • body: 네비게이션바 아래의 전체 영역

완전한 구역: SafeArea

• appBar 추가

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello flutter!'),
        ),
        body: Text('Hello world!'),
      ),
    );
  }
}

• Center 정렬
  • Center Widget가 child를 가지고 있고, 그 child가 바로 Text

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello flutter!'),
        ),
        body: Center(
          child: Text('Hello world!'),
        ),
      ),
    );
  }
}

#4. Recap

• StatelessWidget: 플러터의 core widget
  • 화면에 무언가를 띄워주는 역할
• 위젯이 된다는 것 = 계약을 맺는다는 것
  • 계약: build 메소드를 구현해야 한다는 것
• 루트는 MaterialApp(google) 또는 CupertinoApp(apple)
  • home: 위젯을 리턴해야 하는 프로퍼티
    • Scaffold: 화면의 구성 및 구조에 대한 것들을 가지고 있는 위젯
      • appBar: 상단
      • body: 네비게이션바 아래의 전체 영역
        • Conter: child를 가운데에 오게 하는 위젯
          • Center 위젯을 쓰기 위해서는 child를 써줘야 함

#5. Classes Recap

• 알아둬야할 것
  1. 위젯을 사용할 때마다 우리는 클래스를 인스턴스화 하고 있음 (다트는 new를 쓸 필요가 없음. 쓰든 안쓰든 똑같음)

  • positional parameter constructor

    Class Player {
    	String name;
    
    	Player(this.name);
    }
    
    void main() {
    	var cocoa = Player("cocoa");
    	cocoa.name // cocoa;
    	runApp(App());
    }
    

  • named parameter

    Class Player {
    	String name;
    
    	Player({required this.name});
    }
    
    void main() {
    	var cocoa = Player(name: "cocoa");
    
    	runApp(App());
    }