flutter1

widget

"레고블록"을 조립한다.
widget을 합치는 방식으로 앱을 만들 수 있다.
공식 위젯 사이트
커뮤니티 위젯 사이트도 존재한다.

그냥 이런 것들이 있구나. 정도 알고 넘어가자.

widget사용

void main() {
  runApp(App());
}
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
	return ??
  }
}

main함수가 App이라는 클래스를 실행하는 코드다.
그런데 App이 상속받고 있는 StatelessWidget은 뭘까.
단순 class 를 위젯으로 바꿔주기 위한 가장 기초적인 것을 상속 받은 것이다.
이렇게 함으로써 이제 App이라는 위젯이 만들어 진 것.

이제 return 구문을 작성해보자.
구글과 애플의 디자인 시스템 두 개 중 하나를 고르자

• matrial, cupertino
  우리가 어떤 식으로 앱이 보이게 하고싶은지 알려주는 것
  근데 나만의 커스터마이즈가 하고싶어! 그래도 기본 UI설정 재료인 디자인 시스템을 선택해야한다.
  flutter를 구글에서 만들었으니 matrial이 더 좋은 듯?하다
  따라서 matrial선택.

그럼 이렇게 나타나는데,,,, 정말 못생겼다. 왜냐면 코드를 보자.

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

home 화면에서는 text를 보여주세요! 인데 화면 구조가 없기때문에 저렇게 보이는 것.
이 때 사용하는 것이 Scaffold다.

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

AppBar를 통해 상단에 title도 만들어 주고, Center위젯으로 중앙정렬도 추가했다.