[Widget] LayoutBuilder

LayoutBuilder Example

---

class Responsive extends StatelessWidget {
  final Widget? mobile;
  final Widget desktop;

  const Responsive({Key? key, required this.desktop, this.mobile,})
      : super(key: key);

  static bool isMobile() =>
      ScreenUtil().screenWidth < 700;

  static bool isTablet() =>
      ScreenUtil().screenWidth >= 700 &&
      ScreenUtil().screenWidth < 1200 * c;

  static bool isDesktop() => ScreenUtil().screenWidth >= 1200 * c;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= 700) {
          return desktop;
        } else {
          return mobile ?? desktop;
        }
      },
    );
  }
}

 

LayoutBuilder 실 사용법!

 

- Constraints는 현재 Web의 size를 말한다.