파파비의 블로그

1. dart.io 파일 import 2. Platform객체를 통해 ios인지 안드로이드 인지 등 파악 가능하다. 안드로이드랑 ios에 따라 위젯들 모양이 다른 것들이 있다. 그런 것들은 .adaptive를 붙여주기만 하면, 운영체제에 따라 다르게 렌더링 된다. 바로 아래처럼 말이다. 이거 외에도 운영체제 자체를 파악하고 그에 따라 쿠페티노 위젯을 사용하든가 머테리얼 위젯을 사용하든가 하는 식의 코딩도 가능하다.

혹시 차이를 알겠나요? portrait 모드일 때는 지우는 버튼 옆에 텍스트가 없지만 land 모드 일때는 텍스트가 있습니다. 하지만 이게 방향에 따른 것은 아니고, portrait이어도 화면이 충분히 크다면, Delete 텍스트가 추가됩니다. 이렇게 방향에 따른 레이아웃 변화가 아니라 화면 사이즈에 따른 위젯 변화는 어떻게 줄까요 ? 여기를 보면 트레일링 부분에 MediaQuery를 통해 threshold를 걸어두고, 그 사이즈에 따라 생성되도록 만들어두었습니다. 이런 방법도 가능합니다. + FlatButton.icon은 FlatButton + Icon + Text가 가능한 조합의 위젯입니다!

플러터에서는 화면 방향에 따라 어떻게 대응할 수 있을까요? 1. build시 orientation을 파악합니다. (orientation이 바뀌면 build가 실행됩니다.) 이렇게 시작하자 마자 말이죠. return으로 위젯들이 만들어지기 전에요. 참고로 MediaQuery를 통해서 화면 방향 값을 찾을 수 있습니다. 2. 방향에 따라 준비된 레이아웃을 실행합니다. 여기를 보면 child에 isLandscape? 인지 먼저 파악하고 그에 따라 빌드를 다르게 합니다. 여기에서 저는 참고로 portrait일 때는 한 화면에 다 보이게 빌드를 했지만, landscape일 때는 switch를 추가적으로 넣었고, 스위치에 따라 chart가 보여질지, 아니면 다른 리스트 항목이 보여질지 정할수 있도록 해놨었습니다.

1. service 패키지를 import 한다. 2. 진입점인 main 메소드에서, runApp실행전에, WidgetsFlutterBind.ensureInitialized(); 를 실행한다. 3. 그 뒤에 가능한 방향을 리스트로 정해서 SystemChrome.setPreferredOrientations안에 인수로 넣어준다.

앱의 크기에 따라 위젯들의 사이즈를 조절할 수 있으면 얼마나 좋을까요 가능합니다. 이런 개념을 '반응형' 이라고 하며 우리는 그것을 MediaQuery과 LayoutBuilder라는 class를 통해 구현할 수 있습니다. 1. 이 앱은 크게 2가지로 구성되어 있습니다. Chart위젯과 TransactionList위젯입니다. 해당 위젯들이 화면 3:7로 나누어먹으려고 하는데, 고정사이즈로 하면 당연히 화면사이즈가 바뀔 때마다 대응을 하지 못하겠죠. 그래서 우리는 MediaQuery.of(context).size.height을 이용합니다. 이 사이즈는 앱의 화면 크기를 나타내고 따라서, appbar와 그 위의 상태바까지 포함된 크기입니다. 따라서 우리는 그 부분을 제외해주고 3:7로 비율을 나누어야 합니다...

일단 DatePicker 얘기부터 해보자 이것이 datepicker이다. 아마 패키지로는 다양한 datepicker 방식이 존재하지 않을까? 이것은 flutter에서 이미 만들어놓은 datapicker이다. 따로 패키지가 필요없다. Datepicker를 소환하는 방법은 쉽다. Showbottomsheet 처럼, showDatePicker 메소드를 실행하면된다. VS code의 경우 자동으로 인수들이 무엇이 필요한지 다 나타내는데, 저기서 initial Date는 켰을 때 처음으로 선택되어 있는 날짜이며, firstDate은 맨 처음 날짜를 가르켜서 여기 이전으로는 더 이상 볼 수가 없다. lastDate은 맨 마지막 날자다. 그런데, showDatePicker는 return 값이 Future이다. Fut..

이 그림을 보면 원래는 W가 맨 왼쪽에 있었다. 오늘이 수요일이라 W는 오늘을 의미하는데, 직관적으로 W가 왼쪽에 있으면 좀 별로다. 그래서 순서를 바꿔야 하는데 이 위젯들은 .map을 통해 만들어졌다. 순서를 바꾸는 방법은 간단했다. List의 element들 순서를 바꿔버리는 것. (반대로) 그 방법은 이 사진의 맨 아래쪽처럼 .reversed.toList(); 로 하니 해결이되었다

이 그림을 보면, 위에 상단의 값이 매우 길어지면 원래는 그 아래의 bar도 위치가 변동하고, 그래서 전반적으로 울퉁불퉁한 레이아웃으로 변하게 되었다. 그 이유는 무엇일까? 바로 그 숫자가 길어지면서 사이즈의 변동이 생겨서 그런 것인데, Text의 사이즈가 바뀌더라도, 그 것을 감싸는 박스의 사이즈를 일정게 하려면, Text를 FittedBox로 감싸면 된다. 원래는 Text가 컨테이너에 있었지만 FittedBox로 감싸다 보니 훨씬 모양이 예뻐졌다. FittedBox는 간단하지만 필수 위젯이다.