Flutter - #3. LayoutBuilder
내가 보려고 쓰는 Flutter Widget 일기
참고 : https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html
LayoutBuilder
오늘 배워본 위젯은 LayoutBuilder
플러터 배운지 이제 보름이 되어가는지라 솔직히 공식 페이지 설명은 무슨 말인지 잘 못알아들었다;; 뭐... 대충은 요런 내용이었다.
부모 위젯 사이즈에 의존하는 위젯 트리를 만든다. 부모 위젯이 자식 위젯의 사이즈에 제약을 두거나, 자식 위젯의 고유한 크기와는 상관없이 기능할 때 유용하다. 뭐래는겨
일단 주목할만한 점은 레이아웃에 따라 위젯 빌드를 다르게 할 수 있다는 점! 그리고 builder 속성은 반드시 채워줘야한다.
코드 예시로 알아보자
/// Flutter code sample for LayoutBuilder
/* This example uses a [LayoutBuilder] to build a different widget
depending on the available width.*/
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
Widget build(BuildContext context) {
return const MaterialApp(
title:'Test LayoutBuilder',
home: LayoutBuilder_Widget(),
);
}
}
class LayoutBuilder_Widget extends StatelessWidget {
const LayoutBuilder_Widget({Key key}) : super(key: key);
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Test LayoutBuilder')),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
//print(constraints.maxWidth);
if (constraints.maxWidth > 500) {
return _buildLandScape();
} else {
return _buildPortrait();
}
},
),
);
}
Widget _buildPortrait() {
return Center(
child: Container(
height: 100.0,
width: 100.0,
color: Colors.red,
),
);
}
Widget _buildLandScape() {
return Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 100.0,
width: 100.0,
color: Colors.red,
),
Container(
height: 100.0,
width: 100.0,
color: Colors.yellow,
),
],
),
);
}
}
중간에 print로 애뮬레이터의 너비를 찍어보았더니 411이 나왔다. 그럼 constraints.maxWidth > 500 이면 대충 가로 화면 조건으로 줄 수 있다. 가로화면이면 박스를 2개, 세로화면이면 박스를 1개 띄우도록 해보았다.
세로화면이면 아래와 같다.
가로화면이면?
세로화면 일때는 화면 양옆으로 데이터를 많이 띄우기엔 무리가 있는데, 가로화면 일때는 가로로 데이터를 나열해도 가독성에 큰 영향이 없게 된다.
오늘의 일기는 여기까지!
Author And Source
이 문제에 관하여(Flutter - #3. LayoutBuilder), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sharveka_11/Flutter-3.-LayoutBuilder저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)