모바일 개발

플러터 3.10

mike123789-dev — Sat, 13 May 2023 13:09:41 +0900

플러터 3.10이 출시되었으며, 많은 새로운 기능과 개선 사항이 있습니다. 이 포스트에서는 이번 릴리스의 몇 가지 핵심 기능을 살펴보겠습니다.

프레임워크

Material 3

Material 라이브러리가 최신 Material Design 사양과 일치하도록 업데이트되었습니다. 이에는 새로운 구성 요소 및 테마, 업데이트된 시각적 효과 등이 포함됩니다. 개발자는 useMaterial3 테마 플래그를 사용하여 이러한 변경 사항에 대해 선택적으로 수용할 수 있습니다.

NavigationBar 및 NavigationDrawer 위젯이 Material 3 디자인과 일치하도록 업데이트되었습니다. SearchBar 및 SearchAnchor 구성 요소는 검색 쿼리에 대한 예측 텍스트를 제공합니다.

NavigationBar

NavigationDrawer

SearchBar and SearchAnchor

Material 3에 맞춰 DatePicker 및 TimePicker가 새로운 색상, 레이아웃 및 모양으로 업데이트되었습니다.

Material 3에 맞춰 ListTile과 및 BottomSheet도 업데이트 되었습니다

demo app 에서 확인 가능합니다

Mobile

iOS

Impeller가 이제 iOS의 기본 렌더러이며, 성능이 개선되었으며 더 이상 지연 현상이 발생하지 않습니다
iOS 기기용 무선 디버깅이 이제 가능합니다.
SpellCheckConfiguration() 위젯은 이제 iOS에서 Apple의 맞춤법 검사 서비스를 기본으로 지원합니다.

Impeller 엔진이란?
Impeller는 Flutter를 위한 새로운 렌더링 런타임으로, 이전의 Skia 코드를 대체하여 모던 하드웨어 가속화 그래픽 API (iOS의 Metal 및 Android의 Vulkan)를 완전히 활용하는 맞춤형 런타임입니다. Flutter 팀은 Impeller가 엔진 빌드 시간에 더 작고 간단한 셰이더 집합을 미리 컴파일하기 때문에 런타임에서 컴파일하지 않아 Flutter의 초반 지연 문제를 해결한다고 믿습니다. Impeller에는 예측 가능한 성능, 계기 가능성, 이식성, 모던 그래픽 API 및 동시성을 활용하는 등의 목표가 있습니다. Impeller는 iOS에서 기본적으로 활성화되며 성능이 향상되고 지연이 적어집니다

참고: https://docs.flutter.dev/perf/impeller

Android

Jetpack 라이브러리인 Camera X가 Flutter Camera 플러그인에서 Android를 지원합니다. 개발자는 Android 앱에 풍부한 카메라 기능을 쉽게 추가할 수 있습니다.

보안

Flutter 프레임워크는 이제 SLSA (소프트웨어 아티팩트 공급망 수준) 1 수준으로 컴파일됩니다. 이를 통해 스크립트 빌드 프로세스, 감사 로깅과 함께 다중 승인 기능 등을 구현하여 보안을 강화합니다.

Web

아이콘 폰트의 파일 크기가 줄어듦으로써 Flutter 웹 앱의 로드 시간이 개선되었습니다. 모든 브라우저에서 CanvasKit도 크기가 줄어들었습니다. 요소 포함이 이제 가능하며, Flutter 웹 앱을 페이지의 특정 요소에서 제공할 수 있습니다.

DevTools

DevTools는 Material 3를 사용하는 새로운 UI와 개선된 기능으로 업데이트되었습니다. 콘솔은 이제 디버그 모드에서 실행 중인 앱에 대한 평가를 지원합니다.

참고

Flutter와 Material 3

mike123789-dev — Sat, 8 Apr 2023 14:09:12 +0900

구글에서 제공하는 오픈소스 프레임워크인 Flutter는 하나의 코드베이스에서 멀티 플랫폼 애플리케이션을 아름답게 네이티브로 컴파일할 수 있습니다. Flutter의 주요 기능 중 하나는 Material Design을 사용하여 아름답고 반응형 사용자 인터페이스를 만드는 능력입니다.

Material Design

Material Design은 구글 디자이너와 개발자들이 만들고 지원하는 오픈소스 디자인 시스템입니다. 최신 버전인 Material 3은 동적인 색상, 향상된 접근성, 대형 스크린 레이아웃을 위한 기초, 디자인 토큰 등을 통해 개인화 가능하고 표현력 있는 경험을 제공합니다.

Material 3은 TextButton.icon, OutlinedButton.icon, ElevatedButton.icon과 같은 새로운 위젯을 제공하여 개발자들이 쉽게 아이콘을 추가할 수 있습니다. 또한, Material Design 3은 새로운 색상 스키마와 타이포그래피 옵션을 소개하며, 애플리케이션의 브랜드 아이덴티티에 맞게 사용자 정의할 수 있습니다.

Material Design 2와 Material Design 3의 주요 차이점은 개인화와 사용자 표현에 대한 초점입니다. Material Design 3은 사용자 선호도에 따라 라이트 모드와 다크 모드를 전환할 수 있는 기능을 포함하여 개인화에 더 많은 옵션을 제공합니다. 또한, Material Design 3은 더 많은 유연성을 제공하는 디자인 토큰을 새롭게 소개합니다.

Flutter에서 사용하기

Flutter에서 지원되는 Material Design 3 https://m3.material.io/develop/flutter 에서 확인 가능합니다

웹에서 직접 사용가능한 material_3_demo 사이트도 있습니다

Flutter를 사용하면 앱에서 Material Design을 쉽게 구현할 수 있습니다. 다양한 내장형 Material 위젯으로 아름답고 반응형 사용자 인터페이스를 쉽게 만들 수 있는데요. 예를 들어, Scaffold 위젯을 사용하여 앱 바, 본문 및 부동 액션 버튼을 포함한 기본적인 Material Design 앱 구조를 만들 수 있습니다. AppBar 위젯을 사용하여 내비게이션과 작업이 포함된 상단 앱 바를 만들 수 있으며, FloatingActionButton 위젯을 사용하여 앱에서 주요 작업을 수행하는 부동 액션 버튼을 만들 수 있습니다.

또한 TextField, Button, Card, ListTile 등의 Material Design 구성 요소를 사용하여 아름답고 반응형 사용자 인터페이스를 만들 수 있습니다. 이러한 구성 요소는 Material Design 가이드라인을 따르도록 설계되어 앱 전체에서 일관된 모습과 느낌을 제공합니다.

Flutter의 Material Design을 사용하여 아름답고 반응형 사용자 인터페이스를 만들 수 있으므로 사용자를 기쁘게 만드는 멋진 앱을 만들 수 있습니다.

함수형 프로그래밍에 대하여(feat. Swift)

mike123789-dev — Mon, 4 Oct 2021 13:54:26 +0900

현재 프로젝트서 The Composable Architecture를 사용하고 있습니다

라이브러리를 만든 개발자는 함수형 프로그래밍을 고려하며 만들었다고 해서, 함수형 프로그래밍에 대해서 알아보려합니다

워낙에 생소한 개념이다 보니까, 엄청나게 자세한 설명과 예제보다는

함수형 프로그래밍 (Functional Programming)을 이해하는데 필요한 기본 용어와 개념을 중심적으로 정리해봤습니다.

사이드 이펙트(Side Effect)란?

어떤 함수를 호출했을 때, 그 함수의 반환값 이외에 호출된 함수 밖에서 프로그램의 상태변화가 발생하면

이를 Side Effect라합니다.

저렇게 쓰니까 전혀 와닿지 않네요

"내가 어떻게 컨트롤 할 수 없는 외부의 세계에 접근한다"라는 생각이 들면

Side Effect라고 봐도 될 것 같아요.

가장 대표적으로는 File I/O, 네트워킹, 콘솔 로깅,

순수 함수(Pure Function)란?

특정 input에 대해서 항상 동일한 output을 반환하는 함수
그리고 함수 외부의 값을 사용하지 않아 사이드 이펙트가 없습니다.

이러한 순수 함수가 가지는 장점이 뭘까요?

테스팅하기 좋습니다!

output(결과)가 오직 input에만 의존적이기 때문에 테스트 코드를 짜는 게 쉽습니다.

공통적으로 접근해야 하는 상태가 없기 때문에 parallel하게 프로그램을 실행할 수 있습니다.

...그런데?

우리가 만들고 싶은 앱이 이러한 SideEffect가 없으면 과연 얼마나 의미가 있을까요?

그래서 네트워킹, IO와 같은 것을 어떻게 다루는지가 중요합니다.

함수형 프로그래밍(Functional Programming)은 side effect를 하지 말자! 가 아닙니다.

side effect를 어떻게 잘 관리해서 우리의 코드를 테스트하기 좋은 구조로, compose 하기 좋은 구조로 짤 수 있을까?

고민해야 합니다.

그래서, "나는 이러한 input이 있고, 이러한 output을 원한다"를 생각하고,

코드를 작은 함수로 쪼갠다음에, 필요한 함수들을 연결하는 것이 목표가 됩니다.

다시 The Composable Architecture로 돌아오면...

먼저 Github에서 Composable Architecture에 대한 설명을 보면...

Composition
How to break down large features into smaller components that can be extracted to their own, isolated modules and be easily glued back together to form the feature.
Side effects
How to let certain parts of the application talk to the outside world in the most testable and understandable way possible.
Testing
How to not only test a feature built in the architecture, but also write integration tests for features that have been composed of many parts, and write end-to-end tests to understand how side effects influence your application.

확실히 Fucntional Programming에서 추구하는 방향과 겹치네요

SwiftUI 커스텀 컨테이너 뷰 만들기

mike123789-dev — Sun, 26 Sep 2021 15:19:05 +0900

먼저 컨테이너 뷰가 뭘까요?

Apple 문서를 인용하자면...

SwiftUI provides a range of container views that group and repeat views. Use some containers purely for structure and layout, like stack views, lazy stack views, and grid views. Use others, like lists and forms, to also adopt system-standard visuals and interactivity

말 그대로 View를 Contain 하는 View를 컨테이너 뷰라고 하겠습니다. 가장 대표적으로 VStack, HStack 등이 있겠네요. 하지만 애플에서 기본적으로 제공되는 뷰 만으로는 한계가 있을 때가 있습니다.

역시 예시를 드는게 제일 좋겠죠?

다음과 같은 뷰를 카드뷰를 만들어야 한다고 가정해볼게요

가장 먼저 생각나는 방법은

struct NaiveCardView: View {
    let title: String
    var body: some View {
        Text(title)
            .padding()
            .background(Color.white)
            .cornerRadius(10)
            .shadow(radius: 5)
    }
}

일것 같네요

PS. UIKit이랑 비교하면 훨 편하죠....

물론 카드뷰가 Text만 감싸는 거면 상관없겠지만 Text가 아닌 Label이나 Image를 감싸야한다면?
그때마다 CardTextView, CardLabelView를 따로 만드는 건 비효율적이겠죠

그러면 어떠한 View든 받을 수 있도록 제너릭으로 바꿔줄게요

struct GenericCardView<Content: View>: View {
    var content: () -> Content
    var body: some View {
        Group(content: content)
            .padding()
            .background(Color.white)
            .cornerRadius(10)
            .shadow(radius: 5)
    }
}

그리고 마치 Text를 VStack으로 감싸듯 GenericCardView로 감싸주면 됩니다.

GenericCardView {
    Text("Hello")
}

그리고 이제는 Text 외에도 다른 View도 이용할 수 있습니다

GenericCardView {
    Image(systemName: "star")
}

하지만 이것도 한계가 있습니다

View를 한계 이상 넘겨주려 하면 컴파일이 안됩니다!

물론 View들을 다 Group로 감싸주면 해결은 되지만... 매번 감싸주는 게 그닥 좋은 방법은 아닌 것 같네요

GenericCardView {
    Group {
        Text("Hello")
        Image(systemName: "star")
    }
}

다행히도 매우 간단한 해결법이 있습니다

content 클로저를 @ViewBuilder 로 annotate해 주면 됩니다

잠깐?! ViewBuilder가 뭘까요?

애플이 SwiftUI를 공개하던 시점에 Swift에도 변화가 생겼는데 result builders 라는 개념이 생겼습니다.
이러한 result builder중에 View에 특화된 친구가 ViewBuilder입니다

이 친구가 어떤 일을 하는지 코드를 살짝 엿보면...

@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
extension ViewBuilder {
    public static func buildBlock<C0, C1>(_ c0: C0, _ c1: C1) -> TupleView<(C0, C1)> where C0 : View, C1 : View
}

한개 이상의 View를 받아서 하나의 TupleView로 반환해주고 있습니다.

결과적으로는 여러 뷰를 하나의 뷰로 묶어주는 역할을 한다고 보면 될 것 같습니다.

자세한 얘기는 아래 링크를 확인하시면 될 것 같습니다

https://github.com/apple/swift-evolution/blob/main/proposals/0289-result-builders.md

결론적으로는 init 단계에서 @ViewBuilder annotaion을 추가해주면 됩니다!

struct GenericCardView<Content: View>: View {
    var content: () -> Content

    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }

    var body: some View {
        Group(content: content)
            .padding()
            .background(Color.white)
            .cornerRadius(10)
            .shadow(radius: 5)
    }
}

PS.

하지만... 카드 뷰를 만드는 방법이 이것 하나뿐일까요?

방금 만든 카드뷰를 한번 다시 살펴보면

.padding()
.background(Color.white)
.cornerRadius(10)
.shadow(radius: 5)

여러 뷰 모디파이어를 합친 게 다입니다.

그러면 굳이 뷰를 만들지 않고 커스텀 뷰 모디파이어를 만들어도 되지 않을까요?

자세한 건 다음 글에....

참고

https://www.swiftbysundell.com/tips/creating-custom-swiftui-container-views/

지극히 주관적으로 해석한 코딩 명언

mike123789-dev — Fri, 24 Sep 2021 21:22:37 +0900

이전에 학생일 때는 코드가 내 뜻대로 실행되는 것에만 만족을 했었는데,

팀으로 일을 해야하는 개발자로 생활하다 보니 코드 한 줄 한 줄 추가하는데 더 많은 생각을 하게 되네요

나만의 코딩 철학을 가지고 싶어서 코딩 관련 글들을 읽다가 마음에 드는 명언(?)을 모아봤습니다.

"Any fool can write code that a computer can understand. Good programmers write code that humans can understand."
- Martin Fowler

책 리팩토링의 저자인 마틴 파울러가 한 말입니다

몇십 년 전까지는 컴퓨터의 입장에서 "어떻게 하면 조금이라도 더 최적화할 수 있을까?"를 생각하는 게 맞았겠지만.

컴퓨터/스마트폰의 성능이 기하급수적으로 좋아진 현재에서는 오버킬입니다

"좋은 코드는 사람이 이해하기 좋은 코드다"

조금 더 붙이자면 "다른" 사람도 이해하기 좋은 코드 일 것 같네요

프로젝트를 혼자서 개발하는 개발자는 없을것 같습니다.

항상 다른 개발자가 언제든 내 코드를 볼 수 있다 라는 생각을 가지고 코드를 짜야겠죠.

물론 다른 사람의 입장에서 코드를 짜야하면 조금 막연할 때가 있습니다

저는 그럴때에는 "이 코드를 반년 후에도 이해할 수 있을까?"라고 생각하며 코드를 짭니다.

"Simplicity is prerequisite for reliability."
- Edsger W. Dijkstra

“The best code is no code at all. Every new line of code you willingly bring into the world is code that has to be debugged, code that has to be read and understood, code that has to be supported. Every time you write new code, you should do so reluctantly, under duress, because you completely exhausted all your other options.”
- Jeff Atwood

"The fastest code is the code which does not run. The code easiest to maintain is the code that was never written.”
- Robert Galanakis

코딩 관련된 명언에서 정말 자주 얘기가 나오는 것들을 모아봤습니다.

핵심은 코드는 최소한일 수록 좋다 라는 것을 전하려고 하는 말들이네요

이전에는 코드의 line 수가 많으면 잘 짠 거라고 착각을 했는데,

요즘은 같은 일을 하는데 더 간결한 코드가 더 좋은 코드라고 생각을 합니다.

(그리고 가독성도 좋아지기 때문에 자연스럽게 이애하기 쉬운 코드가 되는 것 같아요)

Everything should be made as simple as possible, but not simpler
- Einstein

물론 그렇다고 기괴할 정도로 짧은 코드가 좋은 거는 아니겠죠?

"Give a man a program, frustrate him for a day.
Teach a man to program, frustrate him for a lifetime."
- Muhammad Waseem

이거는 약간 자조적인 얘기인것 같네요

코딩을 하는것이 직업인 사람한테 코딩으로 인한 스트레스틑 숙명으로 받아들이는 게 좋을 것 같습니다. ㅋㅋㅋㅋㅋ

글을 마치며

물론.... 코드를 짤때 정답은 없는것 같네요 (물론 오답은 있는 것 같지만...)

현재 주어진 상황에 따라서 임해야 하는 자세도 달리지겠죠...?

만약 데드라인이 얼마 안 남아서 시간이 없는데 코드를 처음부터 클린 하게 짜는 것이 가능할까요?
어쩌면 먼저 짠 후다닥 짠 다음에 나중에 숨좀 돌리고 리팩터링을 하는 것이 더 좋을 수도 있습니다.
어떤 코드를 짜는데, A와 B가 있다고 가정해볼게요. (A, B 둘 다 성능상으로는 동일)
개인적으로는 A가 좋아 보이지만, 팀에서는 B로 하기로 약속을 했으면 통일성을 위해서 B로 하는 게 맞을 것 같네요

다양한 상황에서 최선의 코드를 짤 수 있도록 노력해야겠습니다.

그리고, 고민이 있을 때는 주변을 둘러보는 것도 좋습니다.

주변에 고민을 같이 들어줄 동료/친구가 있다면 함께 의견을 나누고,

만약 당장 옆에 사람이 없다면, 구글링을 하는 것도 좋은 방법이고, 오픈소스 코드를 참고하는 것도 큰 도움이 됩니다.

글을 너무 두서없이 써서 어떻게 마무리할지 잘 모르겠네요

확실한 거는 앞으로 코드를 짤 때 하나의 생각을 뇌 뒤편에 심어둘 것 같습니다.

어떻게 하면 코드를 조금만 짤 수 있을까? 이 코드를 반년 후에 이해할 수 있을까?

빌 게이츠의 말을 인용하면서 마무리하겠습니다.

“I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it.”
- Bill Gates

개발자로 구글링하는 법

mike123789-dev — Sun, 19 Sep 2021 20:42:08 +0900

컴퓨터 공학 전공 학생이라면, 혹은 매일 코드를 짜는 개발자라면 구글링은 필수입니다.

짧은 시간 내에 원하는 정보를 정확하게 찾아내는게 점점 중요해 진것 같습니다.

그래서 오늘은 구글링을 할때 도움이 되는 팁 몇가지를 공유합니다.

키워드

긴 검색어 중 꼭 포함해야하는 키워드가 있으면 ""로 감싸주세요
```
how to make shadow "uikit"
```
그리고 키워드를 제외하고 싶다면 해당 키워드 앞에 - 를 붙여주세요
```
how to make shadow "uikit" -swiftui
```

사이트

특정 사이트 내에서 검색하고 싶다면 해당 사이트 URL 앞에 site: 를 붙여주세요PS. 애플의 공식문서를 검색하고 싶을때 site:apple.com 을 자주 사용했습니다
```
site:apple.com circle swift
```

날짜

특정 날짜 이전 혹은 이후을 제한해서 검색을 하고싶다면 after , before를 붙여주세요PS. 어떤 프레임워크의 API가 deprecate 되기 이전의 검색을 하고 싶을때 유용합니다.

swiftui textfield before:2021

how to move file in swift after:2018

와일드 카드

검생을 할때 비워주고 싶은 부분은 * 을 끼워주면됩니다.

how to build a * with swift

파일 타입

파일 타입을 지정하는것도 가능합니다.
저는 PDF 파일을 찾을때, 혹은 이미지 중 gif만 찾고 싶을때 자주 사용했습니다.

Foobar filetype:pdf

loading filetype:gif

꼭 구글을 이용해야할까...?

99%의 경우에는 검색 결과에 만족을 하겠지만, 가아아아끔 원하는 결과가 안 나오는경우도 있을 수 있죠

구글외에 사용 하는 검색 엔진인 DuckDuckGo 도 추천합니다

[플러터 2.0] 버튼 - (2) (ToggleButtons, DropdownButton, PopupMenuButton)

mike123789-dev — Sun, 18 Apr 2021 00:05:22 +0900

이전 글에서는 TextButton, ElevatedButton, OutlinedButton 즉 하나의 버튼 만을 알아봤습니다.

그런데 하나의 버튼이 아닌 여러 개의 버튼이 필요할 때가 있겠죠?

가장 많이 쓰이는것은 ToggleButtons, DropdownButton, PopupMenuButton입니다
각 버튼들이 어떻게 다른지 그리고 어떤 상황에서 쓰이는지 한번 알아볼게요

역시나 글로 설명하는것 보다는 직접 실험을 할 수 있도록 dartpad를 준비했습니다.

ToggleButtons class

ToggleButtons는 child 버튼들이 row로 표시됩니다. 각 버튼의 state는 isSelected로 결정이 됩니다.

그래서 버튼들의 개수에 맞게 bool 리스트를 넘겨줘야합니다.

ToggleButtons(
    children: <Widget>[
      Icon(Icons.ac_unit),
      Icon(Icons.call),
      Text("WIFI"),
    ],
    onPressed: (int index) {
      setState(() {
        _selections1[index] = !_selections1[index];
      });
    },
    isSelected: _selections1,
  ),

기본적으로 제공되는 ToggleButtons은 row로 밖에 못 쓰지만 RotatedBox를 쓰면 약간의 꼼수(?)로 column처럼 보이게 할 수 있습니다.

RotatedBox(
quarterTurns: 1,
  child: ToggleButtons(
    color: Colors.greenAccent,
    children: <Widget>[
             RotatedBox(quarterTurns: 3, child: Icon(Icons.format_bold)),
             RotatedBox(quarterTurns: 3, child: Icon(Icons.format_italic)),
             RotatedBox(quarterTurns: 3, child: Icon(Icons.link)),
        ],
    isSelected: isSelected,
  ),
)

DropdownButton class

DropdownButton은 list의 버튼들 중에서 선택할 때 쓰입니다. DropdownButton은 현재 선택된 item을 보여주면, 버튼을 누를 때 선택할 수 있는 item들을 보여줍니다.

타입 T는 각 dropdown item의 value를 의미합니다. Dropdown의 list의 버튼은 무조건 해당 T의 value 이 여아 합니다. 일반적으로 enum이 이용됩니다.

enum MenuType { first, second, third }

onChanged 콜백은 선택한 dropdown value를 업데이트합니다. 일반적으로 setState를 호출해서 새롭게 선택된 value로 업데이트합니다.

DropdownButton(
    value: _dropdownValue,
    items: MenuType.values
        .map((value) => DropdownMenuItem(
              value: value,
              child: Text(value.toShortString()),
            ))
        .toList(),
    onChanged: (newValue) {
      setState(() {
        _dropdownValue = newValue;
      });
    },
    elevation: 4,
  )

PopupMenuButton class

앞서 설명한 DropdownButton와 비슷한데, item을 선택했을대 menu는 dismiss가 됩니다. 즉 현재 선택한 item이 표시되지 않는 점이 Dropdown Button과 PopupMenuButton의 차이점이 되겠네요.

PopupMenuButton에 icon이 제공되는 경우 IconButton처럼 행동하게 됩니다.

PopupMenuButton<MenuType>(
  icon: Icon(Icons.settings),
  onSelected: (MenuType result) {
    setState(() {
      _selection = result;
    });
  },
  itemBuilder: (BuildContext context) => MenuType.values
      .map((value) => PopupMenuItem(
            value: value,
            child: Text(value.toShortString()),
          ))
      .toList(),
),

[플러터 2.0] 버튼 - (1) (TextButton, ElevatedButton, OutlinedButton, IconButton, ButtonBar)

mike123789-dev — Wed, 24 Mar 2021 00:44:50 +0900

플러터에서 버튼과 관련된 글을 보면 FlatButton, RaisedButton 등을 사용하는 것을 볼 수 있는데, Flutter (1.22)버젼부터는 FlatButton, RaisedButton, OutlineButton이 각각 TextButton, ElevatedButton, OutlinedButton으로 업데이트 됐습니다.. (2.0이 아니라 그전 1.22부터 바뀐 겁니다)

기본적인 사용 방법은 다음과 같습니다

TextButton or OutlinedButton or ElevatedButton(
    onPressed: () {},                  //@required
    onLongPress: () {},
    focusNode:,
    autofocus: true,
    clipBehavior: Clip.none,
    style: ButtonStyle(),// 가장 큰 변화! (나중에 더 자세히!)
    child: Widget(),                   //@required
)

이중에 onPressed와 child parameter를 가장 많이 쓸 것 같네요

ElevatedButton(
            onPressed: () {},
            child: Text("ElevatedButton"),
),

먼저 dartpad를 이용해서 코드 예제와 실제 구현 결과가 어떤지 한번 보겠습니다.

사용법 자체는 매우 간단한데, TextButton, ElevatedButton, OutlinedButton 각 버튼마다 어떤 특징을 갖고 있을까요? 그리고 언제 사용하는 게 디자인 가이드라인에 맞는 걸까요?

ElevatedButton

ElevatedButton은 flat 한 layout (예를 들어 list)에 깊이감을 주기 위해서 사용합니다. 그래서 이미 깊이감이 있는 dialog 혹은 card에는 사용하는 것을 자제해야 합니다.

ElevatedButton.icon을 이용하여 버튼에 아이콘을 넣을 수도 있습니다.

TextButton

TextButton은 toolbar, diaglog 혹은 다른 content 사이에 사용을 하는데, 이때 패딩을 줘서 다른 content과 간격을 줘야 합니다. Text는 눈에 보이는 경계가 없기 때문에 상대적인 위치로 다른 content과 차별시켜야 합니다.

ElevatedButton와 마찬가지로 TextButton.icon을 이용하여 버튼에 아이콘을 넣을 수도 있다.

OutlinedButton

OutlinedButton은 ElevatedButton과 TextButton사이의 강도를 가지는 위젯입니다

OutlinedButton의 action은 중요한데, 앱에서 가장 우선수위가 높은 action은 아닙니다.

역시나, OutlinedButton.icon을 이용하여 버튼에 아이콘을 넣을수도 있다.

위 버튼들에서 버튼. icon을 이용하면 왼쪽에 아이콘이 생기게 할 수 있는데, 만약 text(label)은 따로 필요 없고 아이콘만 필요한 경우에는 IconButton을 이용하면 됩니다.

IconButton

위의 버튼들과는 다르게 child가 아니라 icon parameter를 갖고 있습니다

그리고 또 다른 특이점으로는 iconSize를 통해서 버튼의 크기를 조정할 수 있습니다.

icon → Widget

iconSize → double

ButtonBar

ButtonBar(
  children: [
    TextButton(
      onPressed: () {},
      child: Text("TextButton"),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text("ElevatedButton"),
    ),
  ],
),

ButtonBar는 end-aligned 정렬의 버튼 Row입니다.

다만, 공간이 부족한 경우네는 column으로 layout 됩니다.

가장 많이 쓰이는 경우는 card와 dialog에서 button들을 정렬해주는 역할을 합니다.

TextButton, ElevatedButton, OutlinedButton, IconButton과 같이 버튼은 여러 가지가 존재하지만 각자마다 그 쓰임새가 존재합니다.

구글의 Material 홈페이지에서 디자인 가이드라인을 볼 수도 있습니다

https://material.io/design/components/buttons.html

+α

여기까지는 단일(?) 버튼에 대한 소개였고, 만약 멀티(?) 버튼 (아래 움짤과 같은 버튼)에 대해서 알고 싶다면

여기서 보시면 됩니다

[플러터 2.0] LayoutBuilder (반응형 레이아웃 만들기)

mike123789-dev — Sun, 21 Mar 2021 22:56:53 +0900

이전 글에서는 MediaQuery를 이용해서 기기의 화면 크기를 알아보는 법을 배웠습니다

하지만 기기의 전체 화면이 아니라 위젯의 크기를 알고싶을때는 어떻게 해야 할까요?

물론 MediaQuery를 쓰고, 각 위젯의 height, widght를 구해서 빼줘서 어쩠지해서 구할 수는 있지만

이 모든 것을 한방에 쉽게 해결하는 것이 LayoutBuilder 위젯입니다.

구글 공신 문서에서는 Builds a widget tree that can depend on the parent widget's size. 라고 소개하고 있습니다. 말 그대로 위젯의 크기에 따라 build를 하겠다는 뜻입니다.

LayoutBuilder의 builder function은 layout타임에 불리게 되고, constraints이 제공됩니다.

builder: (BuildContext context, BoxConstraints constraints) {
        final width = constraints.maxWidth;
        final height = constraints.maxHeight;
        final ratio = width / height;
        .
        .
        .

builder function은