본문 바로가기

flutter

[Flutter] 기본 flutter 강의 1

반응형

Flutter 강의 1

프로젝트 생성 

  1. flutter sdk path 설정 (flutter 설치한 위치)

   2. project name 설정 나머지는 그대로 두고 finish

 

Flutter project 생성 > lib/main.dart 파일 잘 만들어졌는지 확인 

설정 

- test/analysis_options.yaml
rules : 아래 내용 추가 

rules:
  prefer_typing_uninitialized_variables: false
  prefer_const_constructors_in_immutables : false
  prefer_const_constructors : false
  avoid_print : false

 

아이콘, 이미지, text, 네모상자 그려보기

Icon(Icons.shop) // 아이콘
Image.asset("assets/ryan.jpg") // 이미지 추가

- 이미지를 그릴때는 test/pubspec.yaml 파일에 미리 시작할때 어떤 폴더를 같이 올려줄건지 설정해줘야함

- assets 라는 폴더를 프로젝트 밑에 만들어 줬고 아래내용을 test/pubspec.yaml flutter:에 넣어줌

flutter:
  assets:
    - assets/
Container(width: 50, height: 50, color: Colors.blue) // 네모상자

- 위처럼 추가하면 화면 전체가 파란색이 되어버린다 width, height를 추가하는 의미가 없어지는데 그 이유는 

내가 어디부터 50(LP)인지 말을 안했기 때문 LP: flutter 단위라고 함 그래서 상위에 Center라고 두고 child로 넣으면 됨  

home: Center(
  child: Image.asset('assets/ryan.jpg')
  // Icon(Icons.shop)
  // Image.asset("assets/ryan.jpg")
  // Text("안녕") text도 Center아래에 두면 가운데 옴 
  // Container(width: 50, height: 50, color: Colors.blue)
)

main에 추가하는 법 

stless + tab 하면 main이 돌때 어떤 메서드 실행시킬지 바로 나옴 

그 아래에서 위 내용 실행 해보면 나옴 

물론 지금은 처음이니까 얼른얼릉 더 배우고 싶구만!

반응형

'flutter' 카테고리의 다른 글

[Flutter] 개발환경 설정  (0) 2022.06.30