[Flutter] 내부 widget이 부여받은 사이즈로 구성하는 방법

<분류>
A. 수단
- OS/Platform/Tool : Linux, Kubernetes(k8s), Docker, AWS
- Package Manager : node.js, yarn, brew, 
- Compiler/Transpillar : React, Nvcc, gcc/g++, Babel, Flutter
- Module Bundler  : React, Webpack, Parcel

B. 언어
- C/C++, python, Javacsript, Typescript, Go-Lang, CUDA, Dart, HTML/CSS

C. 라이브러리 및 프레임워크 및 SDK
- OpenCV, OpenCL, FastAPI, PyTorch, Tensorflow, Nsight

 

---

1. What? (현상)

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 
  @override
  Widget build(BuildContext context) {
    return Container(
		...
    );
  }
}

화면 split 된 상황에서 내부의 MyHomePage라는 위젯을, 내가 부여받은 height 만으로 화면을 구성하고 싶은데 MediaQuery.of(context).size는 항상 screen size를 제공합니다.

 

따라서 내가 부여받은 사이즈로 맞춰주려면 어떻게 해야할지 알아보겠습니다.

-----------------------------------------------------------------------------------------------------

< 수직으로 화면을 split해 Layout을 구성하는 방법 >

기기마다 Responsive하게 height를 자동으로 채워주는 Expanded() 를 활용해 아래와 같이 구성이 가능합니다.

return Column(children: <Widget>[
	Container(
    	height: MediaQuery.of(context).size.height - 100,
        child: MyTopWidget(),
    ),
    Expanded(
        child: MyHomePage(),
    ),
    Container(
    	height: 100,
        child: MyBottomWidget(),
    ),

]);

-----------------------------------------------------------------------------------------------------

 

---

2. Why? (원인)

X

---

3. How? (해결책)

• sizedBox()와 LayoutBuilder()를 사용하면 됩니다.
  
  • sizedBox가 아니라 Container이더라도 사이즈를 명시해줄 수 있으면 됩니다.

외부

SizedBox(
  width: 100,
  height: 100,
  child: MyHomePage()
),

내부

LayoutBuilder(
        builder: (context, constraints) {
          return SizedBox(
            width: constraints.maxWidth,
            height: constraints.maxHeight,
            child: CameraPreview(controller),
          );
        },
      ),

<주의> 사실 LayoutBuilder는 constraint를 주는 것이기 때문에, child widget에서 MediaQuery를 사용한다고 해도 height를 구할 수 없다.

 

---

https://stackoverflow.com/questions/73482018/mediaquery-ofcontext-size-vs-layoubuilder-boxconstraints-constraints

https://stackoverflow.com/questions/49307677/how-to-get-height-of-a-widget