Flutter 스터디 15 반응형 레이아웃

순한맛 시즌2 반응형 레이아웃으로 유투브 페이지 구조 만들기

 

반응형 레이아웃 기본1

// main.dart

import 'package:flutter/material.dart';

import 'MyPage.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
        textTheme: TextTheme(
          bodyText2: TextStyle(
            fontSize: 30,
            color: Colors.white
          )
        )
      ),
      home: MyPage(),
    );
  }
}

//MyPage.dart

import 'package:flutter/material.dart';

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title:Text('MediaQuery'),
      ),
      body: Center(
        child: Column(
          children: [
            Text('Width: ' + MediaQuery.of(context).size.width.toString()),
            Text('Height: ' +MediaQuery.of(context).size.height.toString()),
            Text('Aspect Ratio: ' +MediaQuery.of(context).size.aspectRatio.toStringAsFixed(2)),
            Text('Orientation: ' +MediaQuery.of(context).orientation.toString()),
          ],
        ),
      ),
    );
  }
}

 

 

 

반응형 레이아웃 기본2 - 일정 사이즈만큼 작아지면 배경색 바뀌는 레이아웃

// main.dart

import 'package:flutter/material.dart';

import 'MyPage.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
      ),
      home: MyPage(),
    );
  }
}

//MyPage.dart

import 'package:flutter/material.dart';

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {

    final currentWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      backgroundColor: currentWidth < 600 ? Colors.deepPurple[300] : Colors.red,
      body: Center(
        child: Text(currentWidth.toString()),
      ),
    );
  }
}

 

---

 

반응형 레이아웃 기본2 - 일정 사이즈만큼 작아지면 배경색 바뀌는 레이아웃 (변형 1)

따로 dart파일을 만들어 분리시켜서 구현 > 관리가 용이해지고 여러 곳에 적용하기도 편해짐

 

- LayoutBuilder : 화면의 크기가 아니라 위젯의 크기를 알아내는 것.

부모 위젯의 크기에 따라 위젯트리를 빌드함.

 

호출되는 상황

1. 처음 위젯이 배치될 때

2. 부모 위젯이 다른 레이아웃 조건을 전달할 때

3. 부모 위젯이 해당 위젯을 업데이트 할 때

4. builder 메서드가 구독하고 있는 dependency가 변할 경우

 

 

// main.dart

import 'package:flutter/material.dart';

import 'MyPage.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
      ),
      home: MyPage(),
    );
  }
}

// MyPage.dart

import 'package:flutter/material.dart';
import 'package:responsive_lec/responsive/desktopBody.dart';
import 'package:responsive_lec/responsive/mobileBody.dart';
import 'package:responsive_lec/responsive/responsive_layout.dart';

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ResponsiveLayout(
        mobileBody: MobileBody(),
        desktopBody: DesktopBody(),
      ),
    );
  }
}

// responsive_layout.dart

import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
  const ResponsiveLayout({Key? key, required this.mobileBody, required this.desktopBody}) : super(key: key);

  final Widget mobileBody;
  final Widget desktopBody;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constration){ // 화면의 크기가 아니라 위젯의 크기 알아내는 builder
      if(constration.maxWidth < 800){
        return mobileBody;
      }else{
      return desktopBody;
      }
    });
  }
}

// deskTopBody.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Desktop'),
      ),
      backgroundColor: Colors.deepPurple[500],
    );
  }
}

// mobileBody.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mobile'),
      ),
      backgroundColor: Colors.deepPurple[200],
    );
  }
}

 

---

반응형 레이아웃을 이용한 유투브 모바일 레이아웃 구현

 

mobileBody.dart에 다음과 같이 입력하면 에러가 뜸

body: Column(
  children: [
    Padding(
      padding: const EdgeInsets.all(16.0),
      child: Container(
        child: Container(
          height: 300,
          color: Colors.deepPurple[400],
        ),
      ),
    ),
    ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index){
        return Container(
          color: Colors.deepPurple[300],
          height: 120,
        );
      },
    ),
  ],
),

> 왜냐하면 컬럼 위젯 내에서 ListView를 사용하면 세로방향으로 가능한 모든 공간을 차지. 문제는 Column 위젯은 children의 height에 어떠한 제약도 두지 않음

결국 플러터는 ListView 위젯 사이즈를 계산할 수 없음 

 

이때 해결하기 위한 방법으로 ListView 위젯을 Expanded 위젯으로 감싸는 것

그러면 ListViewsms Column 위젯이 허용하는 범위 내에서 차지 할 수 있는 모든 공간을 차지할 수 있음

 

 

모바일 버전

데스크탑 버전

 

 

코드 전체 (반응형 레이아웃 기본2에서 mobile.dart / desktop.dart만 수정하면 됨)

// desktop.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Desktop'),
      ),
      backgroundColor: Colors.deepPurple[200],
      body: Row( // 유투브를 데스크탑으로 보면 사이드바가 존재. row 방향으로 위젯2개가 위치한 것과 같음
        children: [
          Expanded(
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Container(
                    child: Container(
                      height: 300,
                      color: Colors.deepPurple[400],
                    ),
                  ),
                ),
                Expanded(
                  child: ListView.builder(
                    itemCount: 10,
                    itemBuilder: (context, index){
                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          color: Colors.deepPurple[300],
                          height: 120,
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),

          //side pane1 = 사이드바
          Container(
            width: 300,
            child: Expanded(
              child: ListView.builder(
                itemCount: 10,
                itemBuilder: (context, index){
                  return Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      color: Colors.deepPurple[300],
                      height: 120,
                    ),
                  );
                },
              ),
            ),
          )
        ],
      ),
    );
  }
}

//mobile.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mobile'),
      ),
      backgroundColor: Colors.deepPurple[200],
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Container(
              child: Container(
                height: 300,
                color: Colors.deepPurple[400],
              ),
            ),
          ),
          Expanded(
              child: ListView.builder(
                itemCount: 10,
                itemBuilder: (context, index){
                  return Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      color: Colors.deepPurple[300],
                      height: 120,
                    ),
                  );
                },
              ),
          ),
        ],
      ),
    );
  }
}