Flutter 최대, 최소 사이즈 정하기 (BoxConstraints)

요즘 웹 같은 경우는, 웬만하면 다 반응형이다. 화면 넓이가 크거나 작거나 디자인이 깨지지 않는 게 트렌디하기 때문이다.

반응형을 만들 때, 어려운 점이 가로로 사진들이 배치되어 있는데 화면 가로 사이즈가 줄어들 때 사진도 같이 줄어들어서 촌스럽게 변하는 경우가 있다

이때는 슬라이더로 처리하거나 minWidth나 minHeight같이 최소 사이즈를 정해서 대처를 한다

이번시간에는 Flutter에서 사이즈를 정하는 것을 해보겠다

 

1. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practice_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 1),
          child: Container(
            color: Colors.red,
            child: Image.asset(
              "assets/flutter.png",
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

 

실행시켜 보면 아래와 같다. 반응형 예제를 위해서 웹으로 실행시켰다

는 부모의 Size에 맞는 넓이를 가지는 것인 거 같다

현재는 Container와 Image의 사이즈는 같다. Image는 Container의 넓이를 따라간다

 

 

2. maxWidth

최대 사이즈를 설정해 보려고 한다 

constraints: BoxConstraints(
  maxWidth: 500,
),

최대 사이즈를 설정할 때는 constraints: BoxConstraints를 사용하여 maxWidth를 주면 된다

결과는 변화가 없다. 이미지가 maxWidth보다 크지 않아서 확인할 수가 없었다

대신 Cotainer크기를 늘려보도록 하겠다. 

 

확실한 결과를 보기 위해서 Container크기를 5000으로 해놨다

무조건 화면을 넘어갈 정도로 큰 사이즈이다

하지만 이건 틀렸습니다

위와 같이 width사이즈를 500으로 맞춰준다. 이렇게 최대사이즈를 제어할 수 있다

 

3. maxHeight

height사이즈도 마찬가지로 똑같을 것이다

이렇게 Container에 height 5000 넣어 주고 constraints > maxHeight 500을 넣고 실행해 보았다

이렇게 사이즈를 잘 제어하는 것을 배웠다

 

4. maxWidth와 maxHeight를 지운다면??

maxWidth와 maxHeight를 지워보고 다시 실행시켜 보았다

화면을 넘어가서 보이는 화면은 그레이색상으로 될 줄 알았던 예상과는 다르게 화면 최대 사이즈에 딱 맞게 들어간다

신기했다

BoxConstraints를 사용하여 maxWidth와 maxHeight를 사용해 보았다

반대로 minWidth와 minHeight도 있다. 하지만 굳이 하지 않겠다 maxWidth와 maxHeight의 반대이기 때문에 충분히 이해했을 거라고 생각한다