https://flutter-en.dev/docs/get-started/learn-more
더 알아보기
Flutter 학습을 위한 추가 리소스입니다.
flatter-de.dev
오늘 우리는 이곳을 방문합니다. 다른 페이지의 목차처럼 느껴져서 오늘 완성하기 어려울 수도 있습니다.
https://flutter-en.dev/docs/development/ui/widgets-intro
위젯 소개
flatter-de.dev
이 페이지는 번역되지 않았습니다. 요약하면 Flutter는 React에서 영감을 얻었으며 위젯을 통해 사용자 인터페이스를 만듭니다. 기본 위젯에는 텍스트, 행, 열, 스택 및 컨테이너가 포함됩니다.
위의 사이트는 최신 버전이 아니므로 코드를 그대로 실행하면 항상 오류가 발생합니다. 두 가지 오류가 있습니다.
Title 매개 변수는 형식 때문에 null일 수 없지만 암시적 기본값은 null입니다. 0이 아닌 명시적 기본값 또는 “필수” 한정자를 추가해 보십시오.
‘TextTheme’ 유형에 대해 ‘제목’ getter가 정의되지 않았습니다. “Title”을 정의하는 라이브러리를 가져오거나 이름을 기존 getter의 이름으로 수정하거나 “Title”이라는 이름의 getter 또는 필드를 정의해 보십시오.
위의 두 가지 버그는 코드 최적화를 통해 수정되었습니다.
import 'package:flutter/material.dart';
class MyAppBar extends StatelessWidget {
MyAppBar({required this.title}); // 이 부분에 required를 추가했다. null-safety가 활성화되어 있기 때문에 그냥 사용 불가
// required를 앞에 붙여주면 매개변수가 항상 지정되어야 한다고 명시함으로써 null-safety를 지킬 수 있다
// Fields in a Widget subclass are always marked "final".
final Widget title;
@override
Widget build(BuildContext context) {
return Container(
height: 56.0, // in logical pixels
padding: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: BoxDecoration(color: Colors.blue(500)),
// Row is a horizontal, linear layout.
child: Row(
// <Widget> is the type of items in the list.
children: <Widget>(
IconButton(
icon: Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null, // null disables the button
),
// Expanded expands its child to fill the available space.
Expanded(
child: title,
),
IconButton(
icon: Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
),
),
);
}
}
class MyScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Material is a conceptual piece of paper on which the UI appears.
return Material(
// Column is a vertical, linear layout.
child: Column(
children: <Widget>(
MyAppBar(
title: Text(
'Example title',
style: Theme.of(context).primaryTextTheme.titleLarge, // title --> titleLarge
// 찾아보니 TextTheme class에서 title이 없고 titleLarge만 있는 듯 하다
),
),
Expanded(
child: Center(
child: Text('Hello, world!'),
),
),
),
),
);
}
}
void main() {
runApp(MaterialApp(
title: 'My app', // used by the OS task switcher
home: MyScaffold(),
));
}
pubspec.yaml 파일의 위 코드에서 used-material-design: true설정되어 있는지 확인해야 합니다.
import 'package:flutter/material.dart';
https://api.flutter.dev/flutter/material/TextTheme-class.html
TextTheme 클래스 – 재료 라이브러리 – Dart API
머티리얼 디자인 텍스트 테마. 머티리얼 디자인의 다양한 타이포그래피 스타일에 대한 정의(예: labelLarge, bodySmall). TextTheme을 직접 만드는 대신 Typography.black 또는 Typography.white로 인스턴스를 검색할 수 있습니다. 그것들을 얻으려면
api.flutter.dev
TextTheme 클래스에 제목이 없는 것 같아서 titleLarge로 대체했습니다. 이전에 제목이 있었는지 또는 다른 방법이 있는지 확실하지 않습니다. 위 문서 참조.

아무튼 위의 트러블 코드를 실행하면 아래와 같은 화면이 나옵니다. onPressed는 null로 처리되기 때문에 탐색 메뉴와 검색 아이콘은 눌러도 변경되지 않습니다.