반응형

Flutter 77

[노마드코더: Flutter 로 웹툰 앱 만들기] #3.3 VSCode Settings

const 타입 변수 1) 값을 수정할 수 없다 2) 컴파일 하기 전에 값을 알 수 있는 속성 var finalPrice = 45; 라고 값을 설정한다. 이러한 Color 값은 const이기 때문에 const Color(0xFF181818)이라고 작성하는 게 나을 지도 모른다. 여러 변수에 적용되기 쉽겠다 하지만 대신에 설정으로 가서 Json 파일이 하나 열리면 "editor.codeActionsOnSave": {"source.fixAll": true}, 해당 코드를 삽입하자 "[dart]": { "editor.formatOnSave": true, "editor.formatOnType": true, "editor.rulers": [ 80 ], "editor.selectionHighlight": false..

[노마드코더: Flutter 로 웹툰 앱 만들기] #3.1 Developer Tools

맨 오른쪽 돋보기 버튼을 통해서 이렇게 developer tool을 통해서 구조를 확인할 수 있다 그리고 이 버튼을 누르게 되면, 직접 위의 아이콘을 누르면 화면에서 구조들을 클릭하며 확인할 수 있다 그리고 아래의 아이콘을 클릭하면 아래와 같이 컬럼/로우들을 보여준다 짱짱 import 'package:flutter/material.dart'; class Player { String? name; Player(); //this.name에 들어오는 인자가 name으로 들어갈 것이다 // name = this.name } void main() { var nico = Player(); runApp(App()); } class App extends StatelessWidget { @override Widget bu..

[노마드코더: Flutter 로 웹툰 앱 만들기] #3.0 Header

- 각 컬럼(열)을 오른쪽 정렬하고 싶을 때 crossAxisAlignment: CrossAxisAlignment.end 이걸 사용해야 한다............ Main이랑 늘 헷갈림...... - 그리고 color 들어간 Text 에 opacity 주고 싶을 때 한 번에 줄 수 있다. style: TextStyle( color: Colors.white.withOpacity(0.5), ), - background color를 16진수 코드로 주고 싶을 때 Colors.black 대신에 이렇게 사용한다. 0xFF는 기본 값으로 적고 숫자를 이어서 입력해야 한다. Color(0xFF181818), 이런 식으로 VS Code에서 색상 코드를 확인할 수 있다 (opacity 포함) - padding값 주는 법..

[노마드코더: Flutter 로 웹툰 앱 만들기] #2.5 Classes Recap

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class Player { String name; Player({required this.name}); //this.name에 들어오는 인자가 name으로 들어갈 것이다 // name = this.name } void main() { var nico = Player(name: 'Yu'); runApp(App()); } class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( cen..

[노마드코더: Flutter 로 웹툰 앱 만들기] #2.3 Hello World

Everything in flutter is widget. 위젯을 이용해서 어플을 만들고 Flutter 웹사이트에 가면 이렇게 위젯 카탈로그도 확인해볼 수 있다 외울 필요 없이 뭐가 있는 지 확인하면 된다 사람들이 만든 위젯을 98.9프로 거의 다 찾을 수 있다 기억해야할 필요 없다. 위젯이 되기 위해서는 StatelessWidget을 extend 해야 한다. 지금은 BuildContext context 무시하자, 나중에 설명해주겠음 플러터 관점에서 위젯은 UI를 구성하는 블럭 같은 것이다 프로그래밍 관점에서는 클래스 import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class App extends Stateles..

Flutter 플러터 SizedBox에 color 넣는 법

계속 backgroundColor라고 검색했는데 생각해보니 박스 자체의 색상이니 color가 맞다.... 텍스트에 color 주려면 그냥 TextStyle...★ Container 박스는 무거운 편이라서 보통 SizedBox를 이용해서 성능 개선을 한다고 들었다. 그러나 Container와 같은 방식으로 SizedBox에 색상 삽입이 안돼서....... 구글링한 결과 DecoratedBox()로 감싸서 사용해야 한다고 한다. Container에서는 Container( color: Colors.black, ) 이런식으로 하위에 박스 컬러를 넣을 수 있었는데 Row는 이런식으로 불가능하다. 그래서 찾아본 결과 SizedBox, 박스에 색상을 넣고 싶으면 child : 아래 DecoratedBox로 감싸서 d..

Flutter 2022.11.27

Flutter 플러터 레이아웃 만드는 연습하기

한 때 자주 썼던 숨고 레이아웃을 따라하려고 한다. 기본 디자인은 이렇게 되어 있고 나는 이 부분만 따라해보려고 한다. 현재까지는 이렇게 만들었다 - 11/27 더 수정할 필요한 부분을 생각해보자면, 1) 숨고 페이 사진을 저 공고 위에 붙일 것 2) 영어과외 부분에 위아래 마진을 더 줄 것 3) 위치와 받은 견적 부분에도 마진 4) 삭제 자세히 보기를 Flex로 3:7 비율로 설정할 것 - 시도는 했으나 왜인지 안먹혀서 막혔다 5) 박스 색상을 하얀색으로 줄 것, 하얀색 처럼 보이지만 약간의 회색이다.

Flutter 2022.11.27
반응형