Flutter (6) 썸네일형 리스트형 #5 flutter Flexible, Expanded | DevTools 사용하기 *해당 블로그는 코딩애플의 쉬운 플러터 강의를 보고 제작되었습니다. Flexible 사용해보기 1. Flexibleflutter에서는 크기를 퍼센트로 지정할 수 없다. 하지만 특정 크기에 비율을 맞추어 제작하고 싶은 경우에 사용할 수 있는 Flexible이라는 기능이 마련이 되어있다. ReactNative 와 같이 flex라는 파라미터에 값을 주어 특정 비율로 제작하는것이 그것이다. body: Row( children: [ Flexible(child: Container(color:Colors.blue), flex: 3,), Flexible(child: Container(color: Colors.green,), flex: 7,), ], .. #4 요소 꾸미기 | AppBar 디자인하기 | 글자, 아이콘 디자인 하기 *해당 블로그는 코딩애플의 쉬운 플러터 강의를 보고 제작되었습니다. 각종 요소 디자인하기 1. 글자 디자인단순 글자 정렬의 경우 body: Container( width: 150, #정렬이 된다는 것을 보여주기 위한 width 크기 지정 color: Color(0xffd9d9d9), #오른쪽 정렬을 보여주기 위함 배경색 child: Text('글', textAlign: TextAlign.end,) ), Text 안에 textAlign 파라미터에 값을 넣어주어도 무방하게 작동하지만 그 외의 작업 e(x.글자 색, 글자 크기, 굵기 등) 은 style이라는 파라미터 값 내에 TextStyle() 위젯으로 지정이 가능하다. body: Contain.. #3 flutter 박스를 이용해 앱 제작하기 *해당 블로그는 코딩애플의 쉬운 플러터 강의를 보고 제작되었습니다. 박스를 이용해 앱 제작하기우리는 앱을 제작할때 여러 박스를 만들어 꾸미는 값을 주어 제작하게 된다. 필수로 사용하는 요소에 대해 정리해보았다. 1. marginbody: Container:( width : 150, height, 150, color : Colors.blue, margin : EdgeInsets.all(20)) margin의 경우 margin 이라는 파라미터에 EdgeInsets라는 값을 넣어주고 뒤에 옵션과 함께 마진 값을 넣어주게 된다.EdgeInsets뒤 all 이라는 것은 모든 면에 마진값을 넣어준다는 뜻 이며, 방향마다 다른 값을 넣어주고 싶을 경우에는 body: Container:( width : 150, h.. #2 flutter 요소를 가로세로 배치하는 방법 / Scaffold *해당 블로그는 코딩애플의 쉬운 플러터 강의를 보고 제작되었습니다. MaterialApp() MaterialApp 이란 구글이 제공하는 Material 테마를 사용가능하게 만들어주는 위젯이다. 구글에서 제공하기 때문에 테마의 느낌도 전부 구글 스타일이라고 생각해야한다. IPhone 스타일의 경우 : Cupertino Widget 을 사용하면 됨커스텀의 경우 Material을 사용하는것이 코드 작성이 복잡해지지 않는다.https://docs.flutter.dev/ui/widgets/cupertino Cupertino widgetsA catalog of Flutter's cupertino widgets that align with Apple's Human Interface Guidelines for iOS .. #1 flutter 플러터 시작 & 위젯 만들기 *해당 블로그는 코딩애플의 쉬운 플러터 강의를 보고 제작되었습니다. 프로젝트 세팅하기 - 프로젝트를 시작하면서 해주는 초기 설정- analysis_option.yaml 파일의 rules에 해당 4줄 추가 prefer_typing_uninitialized_variables -> 타입을 지정하지 않아도 되는 옵션prefer_const_constructors_in_immutables -> const 키워드를 강제화 하는 옵션prefer_const_constructors -> 클래스 생성 시 const 키워드를 강제화 하는 옵션acoid_print -> 프린트 함수 제거를 강제화 하는 옵션* 강의에서는 설명하지 않았지만 이렇다고 한다.... 메인화면 제작 시작하기 메인화면은 lib > main.dart에서 시작.. #0 Flutter 설치하여 시작하기 [Flutter] 개발환경 세팅하기 (맥 OS/ m1) *맥 OS Apple Silicon 환경을 기반으로 개발환경 세팅을 진행한 글 입니다. 1. Rosetta 번역 환경을 설정sudo softwareupdate --install-rosetta --agree-to-license Rosetta 번역 환경 설정을 위한 코드 (진행 안해도 되는건지는 모르겠으나 나 같은경우 하지 않으니 오류가 발생했음..ㅠㅜ) 2. Flutter SDK 설치 진행https://flutter-ko.dev/get-started/install/macos Choose your first type of appConfigure your system to develop Flutter on macOS.docs.flutter.dev - 저.. 이전 1 다음
