Flutter (9) 썸네일형 리스트형 Flutter Align 위젯으로 박스 배치하기(Alignment) 나를 위해 기록하는 Flutter 기초 Alignment로 박스를 배치하는 방법 아홉가지 먼저 나오는 단어는 화면의 세로 방향에 대한 정렬을, 뒤에 나오는 단어는 화면의 가로 방향에 대한 정렬을 나타낸다고 생각하면 쉽다. Align 위젯을 사용해 Alignment로 박스 배치하기 center centerLeft centerRight topCenter topLeft topRight bottomCenter bottomLeft bottomRight 1. center import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.ke.. Flutter BoxDecoration 종류, 사용법 나를 위해 정리하는 Flutter 기초 박스의 크기나 기초 색상 이외의 디자인을 위해서는 BoxDecoration 사용 필요 BoxDecoration color border shape boderRadius boxShadow image gradient backgroundBlendMode 1. color import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( bod.. Flutter 마진(margin), 패딩(padding)으로 여백 만들기 나를 위해 기록하는 Flutter 기초 여백을 만드는 방법 margin과 padding 개념 차이 Flutter margin Flutter padding 1. margin과 padding 개념 차이 마진과 패딩은 여백이라는 공통점이 있지만 개념상 차이점도 가짐 margin : 테두리를 기준으로 외부 여백 (파란색) padding : 테두리를 기준으로 내부 여백 (빨간색) container 등의 경계선을 테두리라고 생각하면 쉽게 구분 가능 Flutter에서는 같은 EdgeInsets를 사용 2. Flutter margin import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends State.. Flutter Scaffold로 기초 앱 틀 잡기 연습 나를 위해 기록하는 Flutter 기초 유튜브 쉬운 플러터 학습 후 남기는 숙제 기록 아래 유튜브 링크는 숙제 해설이 있는 강의 링크입니다. https://www.youtube.com/watch?v=4KH4_6Gd6sE&list=PLfLgtT94nNq1izG4R2WDN517iPX4WXH3C&index=4 목표 Scaffold를 활용해서 앱의 상단바, 중앙부와 하단네비게이션 바 구성 상단바, 중앙부에 텍스트 추가 하단 네비게이션 바에 세 가지 아이콘 위젯 넣고 배치 코드 import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({sup.. Flutter 요소 정렬 종류 나를 위해 기록하는 Flutter 기초 Row로 배치한 요소들을 가로, 세로축을 기준으로 정렬하는 방법 요소 정렬 mainAxisAlignment center start end spaceAround spaceBetween spaceEvenly crossAxisAlignment center start end stretch 1. mainAxisAlignment기준축의 방향으로 정렬1. centerimport 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContex.. Flutter 가로, 세로 공간 나누기 나를 위해 정리하는 Flutter 기초Scaffold로 어플리케이션 공간 나누기가로 방향 구분세로 방향 구분1. Scaffold로 어플리케이션 공간 나누기import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(), body: Container(), bottomNavigationBar: BottomAppBar( child: Contain.. Flutter 위젯 만들기(text, image, icon, box) 나를 위해 기록하는 Flutter 기초 위젯을 만드는 방법화면 표시하기text 위젯image 위젯icon 위젯box 위젯안드로이드 스튜디오 사용1. 화면 표시하기안드로이드 스튜디오 상단에서 형광펜을 칠한 부분을 클릭 후 출력 디바이스를 선택 크롬 선택 후 Run 하면 크롬 브라우저로 확인 가능2. text 위젯 만들기import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Text.. Flutter 프로젝트 시작하기(안드로이드 스튜디오, VS Code) 안드로이드 스튜디오와 vs code에서 새로운 플러터 프로젝트를 시작하는 방법입니다. 1. Android Studio 1. 안드로이드 스튜디오에서 New Flutter Project 클릭 New Flutter Project 메뉴가 없다면, 아래 글 중 안드로이드 스튜디오 세팅을 따라해주세요. https://chadireoroonu.tistory.com/90 Window에서 Flutter 시작하기 두 번째 세팅이지만 헤맸기 때문에 나중의 나를 위해 남겨보는 플러터 세팅방법 Flutter 세팅 단계 flutter 다운로드 환경변수 등록 android Studio 다운로드 Flutter doctor 확인 VS Code extension 설치 1. Flutter chadireoroonu.tistory.com 2.. Window에서 Flutter 시작하기 두 번째 세팅이지만 헤맸기 때문에 나중의 나를 위해 남겨보는 플러터 세팅방법 Flutter 세팅 단계 flutter 다운로드 환경변수 등록 android Studio 다운로드 Flutter doctor 확인 VS Code extension 설치 1. Flutter 다운로드 https://docs.flutter.dev/release/archive?tab=windows Flutter SDK archive All current Flutter SDK releases: stable, beta, and master. docs.flutter.dev Flutter SDK 중 윈도우의 Stable channel 중 가장 위 3.10.6 버전을 다운로드 했습니다. 다운로드 폴더에 담긴 플러터 압축파일의 압축을 풀어줍니다... 이전 1 다음
