flutter 반응형 웹 만들어보기

flutter도 웹을 만들 수 있다고 하여 flutter 로 웹 만드는 것을 찾아봤다. 그러던 중 라이브러리 하나를 발견했는데

responsive_builder: ^0.6.4

responsive_builder | Flutter Package

이 라이브러리를 발견했다.

우선 검색해보면서 하나하나 직접 쳐보면서 해보기로했다.

ScreenTypeLayout.builder(
  breakpoints: ScreenBreakpoints(desktop: 1024, tablet: 768, watch: 250),
  mobile: (_) => OrientationLayoutBuilder(
    portrait: (context) => MobileScreen(),
    landscape: (context) => MobileScreen()
  ),
  tablet: (_) => TabletScreen(),
  desktop: (_) => DesktopScreen(),
)

1. breakpoints

breakpoints: ScreenBreakpoints(desktop: 1024, tablet: 768, watch: 250)

이렇게 분기를 정해줄 수 있다.

1024보다 크면 pc , 768보다 크면 teblet, 250보다 크면 mobile , 그 밑이면 watch 이렇게

1. mobile , tablet , desktop

mobile: (_) => OrientationLayoutBuilder(
  portrait: (context) => MobileScreen(),
  landscape: (context) => MobileScreen()
),
tablet: (_) => TabletScreen(),
desktop: (_) => DesktopScreen(),

이렇게적으면 해당 분기마다 맞게 출력된다.

OrientationLayoutBuilder(
  portrait: (context) => MobileScreen(),
  landscape: (context) => MobileScreen()
)

OrientationLayoutBuilder 이건 가로 및 세로 위젯에 대한 빌더 기능 제공한다.

웹 개발을 했었을 때 화면구성이 fullscreen이 아니라면 대부분 가운데 정렬로 레이아웃이 구성되게 작업했었다.

이런식으로 레이아웃을 화면사이즈에 가운데에 위치하게 한 후 작업을 진행했다. 그렇다고해서 안에 구성들도 다 가운데 정렬로 진행하는 것은 아니다.

가운데에 맞춰 작업하려면

class CenteredView extends StatelessWidget {
  final Widget child;
  const CenteredView({Key?key, required this.child}) : super(key:key);

@override
Widget build(BuildContextcontext) {
    return Container(
padding: const EdgeInsets.symmetric(horizontal: 70),
alignment: Alignment.topCenter,
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 1200),
child: child,
      ),
    );
  }
}

이렇게 위젯을 만든 후 작업하면 편하다.

LayoutBuilder 라는 위젯도 있다.

LayoutBuilder(
	builder: (context, constraints) {
	  if (constraints.maxWidth > 600) {
	    return Center(child: Text('600보다 큼 : ${constraints.maxWidth}'));
	  } else {
	    return Center(child: Text('600보다 작음 : ${constraints.maxWidth}'));
	  }
	}
)

이런식으로 현재 화면사이즈에 맞게 다른 위젯을 보여줄 수 있다.

앞으로도 더 공부하면서 내용을 더 추가하려고한다.