모각코 5주차

중간고사가 끝나고 살짝 잊어버린 Flutter를 다시 공부했다. 

• test/analysis_options.yaml

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

• rules:
• main.dartstless 입력 후 탭 키 누르기
• Container 지우고 MaterialApp이라고 바꾸고 그 안에 코드 짜기 시작
• void main(){} 밑에는 다 지우기
• 설명pubspec.yaml 파일 : 앱 만들 때 필요한 모든 자료들을 정리한 파일
• runApp : 앱 시작해주세요
• 위젯이미지위젯 : Image.asset(’경로’) - 프로젝트 폴더에 assets 라는 디렉토리를 만들어 그 안에 이미지가 들어있어야한다. 이미지를 사용하려면 등록해야한다.flutter:아이콘위젯 : Icon(Icons.아이콘이름)Center() : 내 자식 위젯의 기준점을 정중앙으로 설정

  child: Container( width : 50, height : 50, color : [Colors.blue](<http://Colors.blue>) ),
  

  )MaterialApp() : Material 테마 등 위젯이나 UI 등 사용해서 앱을 만들 수 있다Scaffold(
  • 커스텀 위젯stless 탭키return 옆에 축약할 레이아웃 넣기
  • class 작명
  • 위젯들 한 단어로 축약하려면
  • AppBar()leading: 왼쪽에 넣을 아이콘
  • actions : [우측 아이콘들]
  • title: 왼쪽 제목,
  Row() : 여러 위젯 가로로 배치하는 법. Row( children: [] )ListView(): Column()과 비슷한데 스크롤바가 자동으로 생긴다, 메모리 절약 기능, 스크롤 위치 감시 가능
• Row, Column 요소들 정렬하려면 : mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center 등 사용 (파라미터)
• Column() : 여러 위젯 세로로 배치하는 법 - 스크롤바 자동으로 생기지 않는다
• appBar: AppBar(), body: Container(), bottomNavigationBar: BottomAppBar(),
• Scaffold() : 상중하로 나눠줌
• 위젯 안에 위젯 넣고 싶을 때 : 위젯( child : 위젯() )
• Center(
• 박스위젯 : 네모박스 만들 땐 Container() or SizedBox()
• assets: - assets/
• pubspec.yaml 파일에
• 글자위젯 : Text(’’)
• 스타일ex) ( width : 50, height : 50, color : Colors.blue )
• 플러터의 사이즈 단위는 LP
• (스타일 명 : 값)
• appbar, body, bottomNavigationBar 크기 조절Container()로 감싼 후에 height를 사용한다.
• width, height, child 만 필요한 박스는 SizedBox() 사용.
• height를 사용할 수 없다.
• 디자인하기
  • 박스
    • 전체에 여백padding: EdgeInsets.all(),
    • margin: EdgeInsets.all(),
    • 개별 여백padding: EdgeInsets.fromLTRB(left, top, right, bottom)
    • margin: EdgeInsets.fromLTRB(left, top, right, bottom)
    • 나머지 속성들decoration: BoxDecoration()
    • decoration 에 집어넣어야한다.
    • 박스 위치 정렬alignment 라는 파라미터 이용
    • ex) alignment: Alignment.bottomCenter,
    • Align() 으로 감싸기
    • 박스 width를 꽉차게
    • width: double.infinity
    • 박스 폭박스 하나 넓게: Expanded
    • 박스 폭을 % 사용: Flexible,
  • 글자ex) Text(’글자’, style: Textstyle(),),
    • 색 주는 법
      1. Colors.칼라명
      2. Color(0xffaaaaaa)
      3. Color.fromRGBO()
  • Text()는 style 안에 스타일 넣을 수 있음
  • 버튼IconButton()child:, onPressed: (){}, 넣기
  • ElevatedButton()
  • TextButton()