Flutter - 3

김상윤·2023년 2월 12일

flutter

목록 보기

3/10

pubspec.yaml

프로젝트가 사용하는 이미지, 폰트 등의 자원들을 등록하는 출입국사무소 같은 역할
장치에 저장되있는 이미지를 사용한다면 등록과정이 반드시 필요함
작업할 때 다른 사람의 작업물 코드를 등록할 때
패키지 의존성관리 역할
pubspec필드의 종류
- name : 패키지의 이름. underscore _ 를 사용하세요.(필수)
  version : 패키지의 버전을 의미합니다. (생략할 경우 0.0.0)
  description : 패키지의 설명을 적습니다. Pub에서 어떻게 출력되는지 볼 수 있습니다.
  author 또는 authors : 해당 패키지를 만든 사람을 표기합니다. 이름 <이메일> 형식으로 작성합니다.
  homepage : 패키지의 홈페이지가 있는 경우 적습니다.
  documentation : 문서가 있는 경우 적습니다.
  dependencies : 패키지가 사용하는 의존성 목록입니다.
  dev_dependencies : 패키지가 사용하는 개발용 의존성 목록입니다.
  dependency_overrides : 임시로 의존성을 오버라이드 해야하는 경우 적습니다.
  environment : Dart 2 프로젝트의 경우 적습니다.
  executables : 실행가능한 패키지인 경우 스크립트를 적습니다.
  publish_to : 기본 값은 https://pub.dartlang.org 입니다. none 이면 배포하지 않습니다.

참조 : https://changjoopark.medium.com/%ED%94%8C%EB%9F%AC%ED%84%B0-flutter-%EC%9D%98-pubspec-yaml-ffa40b26296a

Image 위젯
Image.asset

로컬 이미지 표시, pubspec.yaml에 등록되어 있는 이미지를 사용할 때 사용하는 위젯
사용방법 yaml파일에 assets부분을 주석해제, 폴더를 새로 만듦, 그안에 image폴더 만들고 원하는 이미지 드래그앤드롭
yaml파일에 원하는 이미지 경로 설정
Image.network
네트워크에서 이미지 가져오기.
	```
	Image.network("이미지url") ->String 형태로만 
Image.memoty, Image.file 등

row 위젯
자식 위젯을 수평으로 정렬해서 표시
Row(
children: [
 FlutterLogo(),
 Text('Hello, Flutter Beginner!'),
 Icon(Icons.sentiment_very_satisfied),
	]
) 
mainAxisAlignment 속성을 사용하면 주 축을 기준으로 정렬을 수정하는 것이 가능
- mainAxisAlignment: MainAxisAlignment.center - 가운데정렬

start - 시작 정렬
end - 끝 정렬
center - 중앙 정렬
spaceAround - 중간 여백은 동일하나, 첫 번째와 마지막 여백은 중간 여백의 절반
spaceBetween - 양 끝은 붙이고, 중간 여백만 동일하게
spaceEvenly - 첫 번째, 중간, 마지막 여백이 모두 동일하게

교차 축 정렬은 crossAxisAlignment 속성을 사용
- crossAxisAlignment: CrossAxisAlignment.center - 가운데정렬

start - 시작부분 부터 정렬
end - 끝 정렬
center - 중앙 정렬
stretch - 가능한 크기만큼 자식 요소의 크기를 키운다.

column 위젯

자식 위젯을 수직으로 정렬해서 표시, row와 비슷
Column(
  children: [
    FlutterLogo(),
    Text('Hello, Flutter Beginner!'),
    Icon(Icons.sentiment_very_satisfied),
  ]
) 
Scroll -> 컬럼과 로우는 스크롤 안돼, 리스트뷰 사용

MainAxis가 수직을 기준으로 정렬하고 CrossAxis가 수평을 기준으로 정렬

이미지를 동그랗게 하는 법!

circleAvatar

이미지를 원형에 넣기
CircleAvatar(
	backgroundImage : AssetImage('이미지 경로')
    )
clipOvar

이미지에 맞춰 자른다

CilpRRect

영역에 벗어나는거 자름

Container로 자르기

cilpBehavior : Clip.antiAlias -> 내 자식도 영역을 무조건 따라와줘
또는 shape : BoxShape.circle 로 주고 Clip주기

화면 크기에 벗어난 데이터를 보여주면 overflow발생

과제

절대 경로와 상대 경로

Column과 Row 위젯의 mainAxisAlignment, crossAxisAlignment, mainAxisSize 속성

UI

절대경로와 상대경로

절대경로 : 최상위 디렉토리부터 해당 파일까지 경유한 모든 경로를 전부 기입하는 방식이다.
내가 작성중인 파일이 어디 있던 간에 주소가 절대로 변하지 않는다.
상대경로 : 현재 파일이 존재하는 디렉토리를 기준으로 해당 파일까지의 위치를 작성한 경로이다. 상대 경로에서 알아 두어야 할 것은 최상위 디렉토리, 현재 디렉토리, 현재 디렉토리의 상위 디렉토리 접근 방법이다. 경로가 자주 바뀌거나 최초 디렉토리가 서로 다른 Windows와 Mac OS 모두에서 작동해야 하는 프로그램을 만드는 경우엔 그때 그때 경로를 다시 작성하거나 OS 별로 따로 관리해야 하는 것은 너무 비효율적이기 때문에 상대경로가 좋음.

mainAxisSize

주 축의 크기를 수정할 때 사용하는 속성이다.

max : 주축의 크기를 최대로 늘임 (남은 영역을 모두 사용)

min : 주 축의 크기를 최소로 줄임

UI 만들기

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( 
body: Center(
child: Container( width: 300, height: 300, 
decoration: BoxDecoration(
gradient: LinearGradient( 
begin: Alignment.topLeft, end: Alignment.bottomRight, colors:[Colors.blue,Colors.cyan,Colors.green,Colors.orange,Colors.red] ) ),
), ), ), ); } }

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( body: Container(
width: 300, height: 300, margin: EdgeInsets.all(50),
padding: EdgeInsets.all(100),
decoration: BoxDecoration( 
borderRadius: BorderRadius.only( topLeft: Radius.circular(150), bottomRight: Radius.circular(150), ),
gradient: LinearGradient( begin: Alignment.topRight, end: Alignment.bottomLeft, colors:[Colors.blue,Colors.red] ) ), 
child: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(100),
        color: Colors.green,
    ),
    ),
  ),
  ),
);
} }