Flutter 반응성(적응 개념 사용)

요즘 우리는 앱의 반응성에 대해 생각하지 않고 앱을 만드는 것에 대해 생각하지 않습니다. 모든 앱은 사용자 장치의 화면 크기에 관계없이 자신을 잘 표현할 수 있어야 합니다.

여기에서는 몇 줄의 코드로 쉽게 반응형 디자인으로 앱을 만드는 방법을 제시합니다.

반응형 레이아웃

먼저 프로젝트에서 클래스를 생성하겠습니다. responsive_layout.dart라는 이름을 가질 수 있으며 사용자 장치의 화면 크기에 따라 사용자 정의 위젯을 반환하는 기능이 있는 클래스가 됩니다.

import 'package:flutter/material.dart';
class ResponsiveLayout extends StatelessWidget
{
}

중단점

이제 생성된 클래스 내부에 화면의 범위 또는 최대 너비를 결정하는 지점인 중단점을 생성하고 해당 너비에 따라 위젯을 반환합니다.

class ResponsiveLayout extends StatelessWidget
{
    static const int mobileMaxWidth = 576;
    static const int tabletMaxWidth = 768;
    static const int desktopMaxWidth = 992;
}

화면 확인

다음으로 사용자 화면의 너비가 중단점 범위에 있는지 확인하는 몇 가지 메서드를 만들어 보겠습니다.

static bool isMobile(context)
{
    return MediaQuery.of(context).size.width <= mobileMaxWidth;
}
static bool isTablet(context)
{
    return mobileMaxWidth < MediaQuery.of(context).size.width
    && MediaQuery.of(context).size.width <= tabletMaxWidth;
}
static bool isDesktop(context)
{
    return tabletMaxWidth < MediaQuery.of(context).size.width
    && MediaQuery.of(context).size.width <= desktopMaxWidth;
}
static bool isLarge(context)
{
    return desktopMaxWidth < MediaQuery.of(context).size.width;
}

빌드 레이아웃

거의 마지막에 이제 화면 크기에 따라 ResponsiveLayout을 렌더링하겠습니다.

지원되는 위젯

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

렌더 위젯

class ResponsiveLayout extends StatelessWidget {
...
@override
Widget build(BuildContext context) {
if(isLarge(context))
{
    if(largeBody != null)
    {
        return largeBody!;
    }
    return desktopBody;
}
if(isDesktop(context))
{
    return desktopBody;
}
if(isTablet(context) && tabletBody != null)
{
    return tabletBody;
}
return mobileBody;
}
...

결과

이제 Scaffold 페이지를 만들고 ResponsiveLayout 위젯을 사용하기만 하면 됩니다.

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(
        title: Text("Flutter Responsiveness"),
    ),
    body: ResponsiveLayout(
        mobileBody: Container(color: Colors.red),
        desktopBody: Container(color: Colors.green),
    ),
);
}
}

자원

이 링크에서 Flutter 반응형 위젯에 대해 자세히 알아볼 수 있습니다.
https://docs.flutter.dev/development/ui/layout/adaptive-responsive
이 프로젝트는 아래 링크의 github에 있으며 방향 및 플렉스 레이아웃에 대한 도우미도 포함되어 있습니다.
https://github.com/assisfery/responsive_layout_flutter