22.10.03 레이아웃 만들기

설치하면 기본으로 생성되는 lib 폴더 내에 main.dart 파일을 수정한다. 

import 는 살려둔다. 패키지 같은거 가져올 때 필요하다!

import 'package:flutter/material.dart';

앱 구동시켜주세요~ 하는 코드!!

void main 안에 작성해야 앱 구동이 가능하다.

앱 메인 페이지 입력하면 됨.

void main(){
	runApp(const MyApp());
}

이 아래에 

단축 명령어 stless 를 입력하고 탭 키를 누르면

new Stateless widget 폼을 만들어준다. 

메인페이지를 작성하는 부분인데 

위에 class 같은거는 일단 무시해도 되고 return 부분에 작성한다!!!

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

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

위젯이 리액트 네이티브 컴포넌트 안의 태그 같은 느낌이다. 

글자 넣고 싶으면 Text('글 내용')

글자 위젯 

Text()

이미지 위젯

이미지 폴더는 assets 라고 폴더 하나 만들어서 넣어준다. 

이미지 쓰겠다고 등록도 해줘야 한다. 

pubspec.yaml 

assets 폴더 안에 있는 모든 파일을 다 갖다쓰겠습니다~

flutter: 

  assets: 

    - assets/

Image.asset('경로')

 

아이콘 위젯

Icon(Icons.star)

Icon(Icons.shop)

박스 위젯

Container()

SizedBox()

 

좀 귀엽네?ㅎㅎ

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
          child: Container(width: 50, height: 50, color: Colors.lightBlue)),
    );
  }
}

Center는 홈 위젯을 부모로 두고 자식 위젯을 부모의 Center 로 맞추겠다 하는 위젯이다. 

Widget 이라는 폼을 통해 굉장히 직관적으로 개발을 구조화할 수 있는 것 같다. 

      home: Center(
          child: Container(width: 50, height: 50, color: Colors.lightBlue)),
    );