본문 바로가기
백엔드개발자/FLUTTER, DART

[Flutter] Row, MeterialApp title, SingleChildScrollView

by 보혀니 2022. 6. 26.
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(),
        ),
      )

    );
  }
}