import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '목록에서 보여지는 제목이에오',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('제목'),
),
body:
Row(
mainAxisSize: MainAxisSize.max, // 가로로 꽉채우기
mainAxisAlignment: MainAxisAlignment.center, // 가로 방향 가운데 정렬
crossAxisAlignment: CrossAxisAlignment.center, // 세로방향 가운데 정렬
children: <Widget>[
Container(
color: Colors.red,
width: 100,
height: 100,
padding: const EdgeInsets.all(8.0),
margin: const EdgeInsets.all(8.0),
),
Container(
color: Colors.blue,
width: 100,
height: 100,
padding: const EdgeInsets.all(8.0),
margin: const EdgeInsets.all(8.0),
),
],
),
);
}
}
>> return MeterialApp에서 title로 정한
'목록에서 보여지는 제목이에오' 가 어디에 뜨는지 보여주려고 캡쳐함
MainAxisDize에 정의된 상수
max: 최대크기, 남은 공간을 모두 차지함
min: 최소 크기, 포함된 콘텐츠의 크기만큼 차지한다.
MainAxisAlignment와 CrossAxisAlignment에 정의된 상수
center
start : 왼쪽 정렬
end : 오른쪽 정렬
spaceEvenly
spaceBetween
spaceAround
space*은 여기 참고해라
https://beomseok95.tistory.com/310
SingleChildScrollView
Column을 사용하여 위젯들을 나열하다가 화면 크기를 넘어서면 스크롤이 필요하다.
그럴때에는 SingleChildScrollView로 감싸서 스크롤이 가능하게 할 수 있다.
하나의 자식을 포함하는 스크롤 가능한 위젯이다.
class MyHomePage extends StatelessWidget {
final items = List.generate(100, (i) => i).toList();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('제목'),
),
body:
SingleChildScrollView( // 스크롤 위젯
child: ListBody( // Column으로 지정해준다면?
children: items.map((i)=> Text('$i')).toList(),
),
)
);
}
}
'백엔드개발자 > FLUTTER, DART' 카테고리의 다른 글
[Flutter] AppBar, TabBar, Tab, TabBarView, bottomNavigationBar (0) | 2022.06.27 |
---|---|
[Flutter] ListView, ListTile, scrollDirection, GridView, PageView, Padding (0) | 2022.06.26 |
Flutter 2.0 (Null Safety) (0) | 2022.06.13 |
[Dart] 믹스인(MIXIN), 최상위 함수, 타입추론, dynamic (0) | 2022.06.12 |
window에 flutter 설치시 visual studio오류 (0) | 2022.06.05 |