Flutter-플러터/플러터로 첫 코딩! 썸네일형 리스트형 플러터로 첫코딩하기! 22- Button의 종류들 현재 Flutter에서 제공하는 기본적인 버튼은 총 3가지입니다. 1.ElevatedButton 2.OutlinedButton 3.TextButton 기본적인 틀은 아래와 같습니다. 여기서 styleform으로 원하는 모양의 버튼을 만들 수 있습니다. 그리고 Container도 버튼이 될 수 있습니다. GestureDetector를 Container를 감싸주어서 ontap: 파라미터를 이용해서 버튼으로 만들 수 있습니다. Flutter에서 제공하는 버튼이 마음에 안든다면 Container로 버튼을 만들어서 사용하는 것도 좋은 방법입니다! import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends S.. 더보기 플러터로 첫 코딩하기! 21- Button 의 필요요소 Button 어플에서 가장 중요한 위젯이 아닐까 합니다. 어플의 기본적인 기능들은 Button에 의해서 실행되는 경우가 많기 때문입니다. 계산기, todo, 일기 등등 Button이 없으면 절대 실행 될 수 없습니다. 그렇기 때문에 Button의 필요 요소에 대해 알아보겠습니다. 버튼의 종류는 다양합니다. floattingbutton,TextButton,ElveatedButton,OutlinedButton 등이 있습니다. 위 버튼들의 필수 요소는 onPressed 입니다. onPressed () {} 이 안에 버튼을 클릭하게 되었을 때 실행하고 싶은 함수들을 넣을 수 있습니다. void sum (int a, int b, int c) { a= 2; b=3; c=a+b; print (c); } floatti.. 더보기 플러터로 첫 코딩하기! 20 - Container 에 Image넣기! 플러터의 위젯으로 못만드는건 없지만 (아마도..?) 때론 외부의 힘을 빌려 빠르게 진행하는게 더 현명할 때가 있습니다. 대표적으로 어플 내에 Image가 그렇습니다. 모바일 화면이 작다보니 정보전달을 위해서 사진이나, 카피라이터로 전달하면 더 좋을테니까요 먼저 Image를 사용하기 위한 작업 순서 먼저 알려드리겠습니다. 1. yaml 파일로 들어가서 assets : pubget하기 ->assets 라고 안지어도 됩니다만 음 뭐랄까 전세계 플러터 사용자들의 공통된 약속이라 생각해주세요 2. project 디렉토리 내에 assets 파일 생성하기 3. assets 파일에 넣고 싶은 image파일 넣기 4. 사용하기 Image(''); 1. yaml 파일 가장 중요한 부분이 있습니다. 띄어쓰기 입니다. Ima.. 더보기 플러터로 첫 코딩하기! 19 - Container 꾸미기 얼마전 플러터로 첫 앱을 출시를 했습니다. 앱을 만들고 출시하면서 느낀게 있습니다. 앱 자체의 기능도 중요하지만 디자인이 더 중요하다 라는 사실을요. 그 이유는 내가 만들 앱은 이미 구글플레이나, 앱스토어에 있습니다. 그렇기에 수 많은 어플과 차별점을 두려면 바로 디자인과 Ux에 집중해야 합니다. Container를 그저 흰 박스로 만들지 , 아름다운 색을 넣고, 목적에 맞는 도형으로 만들어서 미각적인 효과를 가진 박스로 만들지 앱 개발자가 꼭 고민해야 하는 부분인 것 같습니다. Container를 꾸미기 위해서는 decoration을 사용해야 합니다. 아래 Container는 2020년 모바일 디자인 업계에서 트렌디하게 나타난 "뉴모피즘 " 디자인 입니다. 이 코드를 전부 공부하듯이 외울필요는 전혀없습.. 더보기 플러터로 첫 코딩하기! 18 - Padding과 Margin 처음엔 왜 이런 기능이 있는지 이해를 못했습니다; 그냥 Row나, Column으로 정렬을 하면 그만 아닌가? 싶었습니다. 하지만 Row, Column으로는 Padding과 Margin 기능을 절대 할 수 없다는 걸 깨닫고 저 또한 애용중입니다. 모바일 화면을 구성할 때 가장 중요한 부분이 "여백" 입니다. 작은 화면에 위젯들이 빽빽하게 넣어져 있다면 가독성면으로 좋지 않습니다. 그런 "여백"을 깔끔하게 만들어 주는게 바로 Padding과 Margin입니다. 하지만 차이점이 있습니다. Padding은 안쪽 Margin은 바깥쪽 여백을 만들어 줍니다. Container( padding : EdgeInsets.all(설정값) || EdgeINsets.fromLTRB(설정값,설정값,설정값,설정값) margin .. 더보기 플러터로 첫 코딩하기 ! 17 Container 꾸미기 플러터의 Contaier는 정말 쓰임새가 많다. 플러터 내의 UI 위젯들을 Container로 다 만들 수 있을 정도입니다. Container는 물건을 담을 작은 박스나, 화물 박스로 쓰입니다. 즉 화면에 Container를 만든다는 것은 무언가를 담을 박스를 놓는 것이죠. Container로 기본적으로 구성 할 수 있는 것은 너비, 높이 색 등을 설정 할 수 있습니다. 더 많은 기능이 있지만 오늘은 세가지만 알아보겠습니다. Container ( width : 120, //너비 120 height : 120, //높이 120 color : Colors.red //빨강 ) 위 Container는 가로 120, 세로 120,빨강색 Container이다. 컨테이너의 많이 활용되는 방법으로는 1.화면 내 텍스트.. 더보기 플러터로 첫 코딩하기 ! -16 Container Container = 컨테이너 = 화물 박스 이렇게 생각나는 건 저뿐일까요 ㅎㅎ? 큰 배에 짐을 실을 때 큰 박스를 컨테이너라고 부르죠. 플러터 위젯을 만들 때 Container를 그렇게 생각하셔도 무방합니다. 미국에서는 컨테이너를 작은 박스에도 사용합니다. 예를 들어 식당에서 음식먹고 포장 할 때 "남은거 싸가게 컨테이너 하나 줘" 라고 표현하기도 합니다. 무언가를 담는 것 즉 Container의 유래입니다. -호민님 설명 인용- Container안에 정말 다양한 위젯들을 담을 수 있습니다. 그래서 다른 위젯들보다 자주 쓰이는 것 같습니다. 저번시간에 Column과 Row를 설명할 때 신도시의 "도로"역할, 즉 신도시를 지을 때 가이드 라인이라고 말씀드렸습니다. Container는 그 도로 옆에 놓일 .. 더보기 플러터로 첫 코딩하기! 15 - Column ,Row 위치 조정 하기 오늘은 Column,Row 로 위젯들의 위치를 조정하는 함수를 배워보겠습니다. 컴퓨터로 워드작을 할 때 글을 정령하는 방법 다 아실 것이라 생각됩니다. "왼쪽 정렬" , "가운데 정렬" , "오른쪽 정렬"이 대표적이죠. 위와 같은 기능이 플러터 Column과 Row안에 들어 있습니다. 바로 mainAxisAlignment와 crossAxisAlignment 입니다. mainAxisAlignment 방향의 메인이라는 뜻이고 crossAxisAlignment 상대되는 방향이라는 뜻입니다. 저번시간에 Column 은 세로, Row는 가로 로 위젯을 배친한다고 배웠습니다. 그렇기에 Colunm( mainAxisAlignment 함수를 쓰게 되면 세로로 배치되는 위젯의 영향을 주고 crossAxisAlignmen.. 더보기 이전 1 2 3 다음
