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(),
)
breakpoints: ScreenBreakpoints(desktop: 1024, tablet: 768, watch: 250)
이렇게 분기를 정해줄 수 있다.
1024보다 크면 pc , 768보다 크면 teblet, 250보다 크면 mobile , 그 밑이면 watch 이렇게
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);
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}'));
}
}
)
이런식으로 현재 화면사이즈에 맞게 다른 위젯을 보여줄 수 있다.
앞으로도 더 공부하면서 내용을 더 추가하려고한다.