본문 바로가기
복붙 노트/다트,플러터

플러터 공부한거 정리 노트

by 태천인(이영훈) 2022. 5. 2.
728x90

// 고정
StatelessWidget

// 화면
Scaffold(

// 앱바
appBar: AppBar(
    title: const Text('aa'), // 제목
    centerTitle: true, //가운데 정렬 
    backgroundColor: Colors.white, // 색상
    elevation: 0, //그림자 제어
),

// 넓이 높이
SizedBox(width: 10)

// 텍스트
Text('b',style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),),

// 여백
Padding( padding: EdgeInsets.all(8.0),)

// 레이아웃
Row() 세로
Column() 가로

// 화면 정렬
crossAxisAlignment: CrossAxisAlignment.center, //column, row
mainAxisAlignment: MainAxisAlignment.center, //row column

// 이미지 적용
Image.asset( 'images/redhat.png', width: 100, height: 100, )

// 환경설정 :
pubspec.yaml 파일에서
assets:
    - images/
    
// 아이콘
Icon(Icons.email),

// 라인 선 만들기
Divider( color: Colors.red, thickness: 2,),

// 색상적용
backgroundColor: Colors.red,
backgroundColor: Color.fromARGB(255, 255, 255, 255)

// 맨위 제목 적용
appBar: AppBar(centerTitle: false, //애플 자동 가운데 적용 안함title: const Text('title'),),

// 스크롤
SingleChildScrollView(
scrollDirection: Axis.horizontal, //스크롤 가로 세로 적용할수 있음

// 이미지적용하는 방법
Image(image: AssetImage('이미자파일'))
Image.network('이미지 URL')
Image.asset('이미지파일', width: 50 , height: 50, fit: BoxFit.fill,) //가득 채워서 그리기
Image.asset('이미지파일', width: 50 , height: 50, fit: BoxFit.contain,) //이미지가 짤리지 않고 비율이 변하지 않은 상태에서 가능한 크게 그리기
Image.asset('이미지파일', width: 50 , height: 50, fit: BoxFit.cover,) //크기에 맞게 덮으면서 나머지 잘린다.
Image.asset('이미지파일', width: 50 , height: 50, fit: BoxFit.fitWidth,) //width 맞게 이미지가 짤린다.
Image.asset('이미지파일', width: 50 , height: 50, fit: BoxFit.fitHeight,) //height 맞게 이미지가 짤린다.
Image.asset('이미지파일', width: 50 , height: 50, fit: BoxFit.scaleDown,) //전체 이미지가 나올수 있도록 이미지 크기를 조절해서 그린다.

// 프로필 이미지 할때 많이 사용
CircleAvatar(backgroundImage: AssetImage('이미지파일'), radius: 50,)
CircleAvatar(backgroundImage: NetworkImage('이미지파일주소'), radius: 50,)

728x90

댓글0