Files
superport_v2/lib/widgets/components/responsive_section.dart

55 lines
1.5 KiB
Dart

import 'package:flutter/widgets.dart';
/// 카드 헤더/푸터 등에서 좌우 영역을 유연하게 배치하는 보조 위젯.
///
/// - 가용 폭이 [breakpoint] 미만이면 세로로 쌓아 overflow를 방지한다.
/// - 넉넉한 폭에서는 기본적으로 좌측은 확장, 우측은 필요한 만큼만 차지한다.
class ResponsiveStackedRow extends StatelessWidget {
const ResponsiveStackedRow({
super.key,
required this.leading,
required this.trailing,
this.breakpoint = 480,
this.gap = 12,
});
/// 좌측에 위치할 위젯.
final Widget leading;
/// 우측(또는 세로 스택 시 아래)에 배치할 위젯.
final Widget trailing;
/// 세로 스택 전환 기준 폭.
final double breakpoint;
/// 스택 전환 시 세로 간격.
final double gap;
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
final isCompact = constraints.maxWidth < breakpoint;
if (isCompact) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
leading,
SizedBox(height: gap),
trailing,
],
);
}
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(child: leading),
const SizedBox(width: 16),
Flexible(child: trailing),
],
);
},
);
}
}