[TIL] Flutter 입문 - 간단한 앱만들기

이번주는 Flutter입문 주차이다.
강의에서 알게 된 내용을 정리해봤다.
지난주까지는 튜터님들이 설명해주시는 내용이 잘 이해되지 않을 때도 많았는데
그동안 명령어들이 그나마 눈에 익어가는지 이해되는 속도가 좀더 빨라진 것 같은 느낌이 들었다.

---

<개발환경>

지난 강의들을 수강하던 때에 android studio 세팅을 마쳐놔서
이번 시간에는 많이 설정할것들은 없었다.

그러나 실습 중간중간 simulator가 실행되지 않아 원인을 찾아보니
iOS 18.1로 Xcode를 새로 다운로드 받은 후 simulator를 재실행 해야
해결되는 오류였다.

---

<Flutter 기초>

프로젝트를 생성하면 여러 폴더와 파일들이 생성되는데
각 폴더, 파일, 그리고 패키지마다의 역할을 알 수 있었다.

dart공부를 하면서 main함수의 중요성과 역할에 대해 배웠는데
Flutter안에서 실행하는 main함수 안에는
다양한 구성요소들이 있어 이들의 역할에 대해서도 배울 수 있었다.

---

<스토어 앱 만들기>

• 레이아웃 나누기 및 필요한 위젯
  • column / row
    : children 속성에 사용할 위젯들을 리스트로 선언
• pubspec.yaml 수정
  • 이 파일의 경우 띄어쓰기, 들여쓰기를 처음부터 정확히 입력해야 다른 작업들이 작동한다.
  • assets / fonts 등 디렉토리 지정
• main 함수에서 runApp() 함수를 호출해야 앱의 루트 위젯을 넘겨줌

<text 위젯>

  const TextStyle({
    this.inherit = true,
    this.color,
    this.backgroundColor,
    this.fontSize,
    this.fontWeight,
    this.fontStyle,
    this.letterSpacing,
    this.wordSpacing,
    this.textBaseline,
    this.height,
    this.leadingDistribution,
    this.locale,
    this.foreground,
    this.background,
    this.shadows,
    this.fontFeatures,
    this.fontVariations,
    this.decoration,
    this.decorationColor,
    this.decorationStyle,
    this.decorationThickness,
    this.debugLabel,
    String? fontFamily,
    List<String>? fontFamilyFallback,
    String? package,
    this.overflow,
  }) 

Text(
	style: TextStyle(
			fontWeight: FontWeight.bold,
			fontSize: 20,
			color: Colors.black,
	)
)

<SafeArea 위젯>

• 핸드폰 기기별로 조금씩 다른 디바이스 UI인 StatusBar(상태바) 영역등에 padding(여백)을 넣어주는 위젯
  
  
  

<quickFix 단축키>

• 커맨드 + '.'
  
  
  

<Flutter Devtools>

• 앱의 UI레이아웃 검사 및 성능 모니터링 등을 할 수 있는 도구
• Toggle select widget 버튼을 클릭 후 위젯 트리에서 Text를 클릭
  • Text 위젯이 어느정도 공간을 차지하고 있는지 확인 가능
  • 마찬가지로 Row 위젯을 확인하면 화면 가로 너비 전체를 차지하는것을 확인가능

<Spacer 위젯>

• Row나 Column에서 위젯 사이의 간격을 조정하는 데 사용
• 사용 가능한 모든 공간을 차지함

// Middle과 End의 간격은 Begin 과 Middle 간격의 2배
const Row(
  children: <Widget>[
    Text('Begin'),
    Spacer(), // 기본 flex 1
    Text('Middle'),
    Spacer(flex: 2),
    Text('End'),
  ],
)

<Padding 위젯>

• 자식 위젯 주면에 여백을 주는 위젯

Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Hello World!'),
)

• EdgeInsets
  • 여백을 나타내는 클래스

• 사용법
  • 상하좌우 모두
    • EdgeInsets.all(8.0)
  • 좌우 만
    • EdgeInsets.symmetric(vertical: 8.0)
  • 상하 만
    • EdgeInsets.symmetric(horizontal: 8.0)
  • 상하좌우 각각 지정
    • EdgeInsets.only(left: 40.0) , EdgeInsets.only(right: 40.0) …

<Image 위젯>

• 말 그대로 이미지를 화면에 표시하기 위한 위젯
• 네트워크 이미지, Asset이미지, File이미지 등 사용가능

const Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)

• 플러터에서 각각의 생성자를 제공해서 간략하게 사용 가능!

  • 네트워크
    • 인터넷의 이미지를 바로 사용

    Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')

  • Asset

    • 프로젝트에 추가해준 이미지 사용

    Image.asset('assets/image.png')

  • File

    • 디바이스 내 저장된 사진 사용

    Image.file(File('디바이스_내_파일경로'))

  • 메모리

    • 메모리 내에 있는 이미지 사용

    Image.memory(bytes)

<fit 속성>

• BoxFit.contain : 원본사진의 가로 세로 비율 변화 없음
• BoxFit.fill : 원본사진의 비율을 무시하고 지정한 영역에 사진을 맞춤
• BoxFit.cover : 원본사진의 가로 세로 비율을 유지한 채로 지정한 영역에 사진을 맞춤. 장점은 사진의 비율을 유지할 수 있다는 점이고 단점은 사진이 지정한 크기를 벗어나면 잘릴 수 있음

<Expanded 위젯>

• Row, Column 내에서 남은 공간을 확장하여 공간을 채울 수 있도록 하는 위젯
• 사용법

Expanded(
	child: Text("test")
)

• Expanded 위젯도 Spacer와 마찬가지로 flex라는 속성을 가지고 있습니다.
• flex를 직역하면 탄력성 있는, 신축성 있는 이라는 뜻이 있습니다.
  첫 번째 이미지에 flex:1, 두 번째 이미지에 flex:3 이라는 값을 주게 되면,
  첫 번째 이미지는 1/4의 높이를 가지게 되고 두 번째 이미지는 3/4의 높이를 가지게 됩니다.
  flex 속성을 주지 않으면 기본 값은 flex:1입니다.
  

      const Expanded({
        super.key,
        super.flex,
        required super.child,
      }) : super(fit: FlexFit.tight);

<SizedBox 위젯>

• width 및 height 크기를 가지는 빈 상자
• 상자 내에 위젯을 배치할 수도 있으며 빈 상자로 사용할 수도 있음

SizedBox(
  width: 200.0,
  height: 300.0,
  child: Card(child: Text('Hello World!')),
)

Column(
	children:[
		Text("1"),
		SizedBox(height:10),
		Text("2"),
	]
)

<debug 배너>

• 우측 상단의 거슬리는 디버그 라벨
• 배포환경이 아닌 개발 시(debug 환경)에서 기본적으로 나옴
• 목적 : 디버그 모드에서는 다트 가상머신이 한번 더 컴파일을 하는 구조이기 때문에 느린데,
  느리다고 불평하는걸 방지
• 해제방법 : MaterialApp의 debugShowCheckedModeBanner속성을 false로 주면됨

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: StorePage(),
    );
  }
}

---

<레시피 앱 만들기>

<구성요소>

• AppBar
• 컴포넌트(화면을 구성하는 요소를 여러 블록으로 쪼개기. 각각의 요소를 각각의 위젯으로 만드는 작업)
  • 화면을 구성하는 각 부분(블록)
  • 구현자에 따라 여러 부분으로 나눌 수 있음
  • 사용이유
    • 코드의 간결화
      - Scaffold내에서 모든 요소들을 구현할 수도 있지만 그렇게 될 경우 한 파일에 코드가 너무 길어짐
      - 즉, 가독성 떨어짐
    • 코드의 재사용
    • 유지보수 편의성