yuzumone's blog

Making Flutter web apps responsive

🏷️

Photo by Domenico Loia on Unsplash

Flutter web でレスポンシブ対応したときのメモ．
responsive_builder を使うとめっちゃ簡単．

responsive_builder | Flutter Package

以下のようにデバイスに応じて Widget を返すようにするだけ．

ResponsiveBuilder(
  builder: (context, sizingInformation) {
    if (sizingInformation.deviceScreenType == DeviceScreenType.desktop) {
      return DesktopWidget();
    }
    if (sizingInformation.deviceScreenType == DeviceScreenType.tablet) {
      return TabletWidget();
    }
    if (sizingInformation.deviceScreenType == DeviceScreenType.mobile) {
      return MobileWidget();
    }
    return Container(color:Colors.purple);
  },
);

今回は横のマージンだけ変えたかったのでマージンだけ渡せるようにした．

class MainPage extends StatelessWidget {
  final double sideMergin;
  const MainPage({Key key, this.sideMergin = 160.0}) : super(key: key);
  ...
}