Flutter 알아둘 것 - 2

context·2023년 4월 5일
0

Flutter

목록 보기
6/7

showCupertino

iOS 스타일로 다이얼로그 실행 (모든 애니메이션 및 작동이 iOS 스타일)

import 'package:flutter/cupertino.dart'
showCupertinoDialog(
	context: context //buildcontext임
    barrierDismissible: true, 
    // 외부 탭해서 다이얼로그 닫히게
    //(Dialog 외 나머지가 barrier)
    builder: (BuilderContext context){
    	//return 위젯
    }
)

_Dday와 같이 첫글자가 언더스코어이면 다른 파일에서 접근할 수 없음.

class _Dday extends StatelessWidget {
	@override
    Widget build(BuildContext context){
    	return Text()
    }
}

Cuper - DatePicker

void onPress(){
	showCupertinoDialog(
   	// 빌드 할 다이얼로그 작성
	context: context,
    builder:(BuilderContext context){
    // 날짜 선택하는 다이얼로그
    	return CupertinoDatePicker(
        	mode: CupertinoDatePickerMode.date,
        
            onDateTimeChanged: (DateTime date) {},
        )
        )
    }
}

Align

자식 위젯의 위치를 정한다.

void onPress(){
	showCupertinoDialog(
	context: context,
    builder:(BuilderContext context){
    
    	return Align( // 정렬 위젯
        	alignment: Alignment.bottomCenter,
            // 아래의 중간
            child: Container(
            	color: Colors.white,
                height: 300,
                child : CupertinoDatePicker(
        		mode: CupertinoDatePickerMode.date,
            	onDateTimeChanged: (DateTime date) {},
        )
        )
        
        )
    }
}

of 생성자

.of(context) 생성자로 정의된 모든 생성자는 BuildContext를 매개변수로 받고, 위젯 트리에서 가장 가까이 있는 객체의 값을 찾아낸다.

결과적으로 MediaQuery.of(context)는 현재 위젯트리에서 가장 가까이에 있는 MediaQuery 값을 찾아낸다.
height : MediaQuery.of(context).size.height / 2

테마

각 텍스트 위젯의 스타일이 아닌, 텍스트 위젯 자체 스타일을 변경하고 싶다면, Theme를 사용하면 편하다.

void main(){
	runApp(
    	MaterialApp(
        	theme : ThemeData( // 테마 지정 클래스
            	fontfamily: "sunflower"
                textTheme: TextTheme( // 글자 테마 적용 클래스
                	headline1: TextStyle(
                    	color: ~
                        fontsize: ~
                    )
                )
            ), home: HomeScreen()
        )
    )
}
// 작업 위젯에서, final textTheme = Theme.of(context).textTheme
// 이후 Text 위젯에서 Text("text", style : textTheme.~)

fontFamily: 기본 글씨체 지정
textTheme: Text 위젯 테마
tabBarTheme: TabBar 위젯 테마
cardTheme : Card 위젯 테마
appBarTheme : AppBar 위젯의 테마
FloatingActionButtonTheme
... 위젯이름+Theme

overflow

핸드폰은 비율과 해상도가 모두 다르다.
화면을 넘어서는 비율에까지 위젯이 존재한다면, overflow 경고가 발생한다.

해결방안
1. 글자나 이미지의 크기를 임의로 조절
2. 위젯이 남는 공간만큼 차지하도록 작업, Expanded 위젯 사용

Widget build(BuildContext context){
	return Expanded(
    	child: Center(
        	child: ~
        )
    )
}

0개의 댓글