본문 바로가기
Project/모면

[Flutter] 기본 사용법 간단 정리

by 독서왕뼝아리 2023. 3. 19.
  • pubspec.yaml 파일 : 프로젝트의 메타데이터를 정의하고 관리
  • ios / android 폴더 : 각 플랫폼에 맞게 앱을 배포할 수 있도록 도와줌
  • test 폴더 
  • ilb 폴더 : 작업 공간

MaterialApp()을 사용하면 '구글'스러운 템플릿 사용 가능

 

stless + tab키 

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key); // 클래스 파라미터

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
  
  // 아래처럼 리턴 타입을 명시하지 않아도 됨!
  // @override
  // build(context) {
  //   return const Placeholder();
  // }
}

 

클래스 문법? : return 문을 클래스 인스턴스로 대체

dart : 자바와 타입스크립트를 섞어놓은 것 같음. 타입 추론 기능 탑재

Row( children : [ ~ ]) 행

Column() 열

 

  • Scaffold()
    • appBar
      • AppBar()
        • title : 왼쪽 제목
        • leading : 왼쪽에 넣을 아이콘
        • actions : 우측 아이콘
        • onPressed : 터치 시 이벤트
    • body
      • Flexible() : flex 인자 값 비율로 레이아웃 배치
        • child
        • flex
      • Expanded() : flex=1인 Flexible() 이라 생각하면 됨
      • ListView()
        • ListTile( onTab=(){} )
    •  drawer
      • Drawer() : 생성 시 앱 바 왼쪽에 자동으로 햄버거 생성
    • bottomNavigationBar
      • BottomAppBar()

 

  • 클래스?
    • Icon()
    • Text()
    • TextButton()
    • IconButton()
    • Image.asset()
    • Container()
      • crossAxisAlignment : 정렬
    • UserAccountsDrawerHeader() : 유저 정보 템플릿
'dart:io' 라이브러리 : 소켓이나 HTTP 통신에 필요한 기능 제공