Closed3
Flutter Webまとめ
![slowhand](https://res.cloudinary.com/zenn/image/fetch/s--cD3UIEKK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/10cf30e300.jpeg)
Flutter on the Web
解説動画
YouTubeのvideoIDが不正です
環境毎のコンパイル方法
低レイヤー部分の違い
-
Android/iOS
-
Web
レンダリング
- HTML or CanvasKit
- 自動でレンダリング方法を切り替えてくれる
![slowhand](https://res.cloudinary.com/zenn/image/fetch/s--cD3UIEKK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/10cf30e300.jpeg)
レスポンシブ
responsive_framework | Flutter Package こちらのpackageが良さそう。
- breakpointの設定ができる
- ResizeとautoScaleをbreakpoint毎に選択できる
- 専用のコンポーネントが用意されている
解説動画
![slowhand](https://res.cloudinary.com/zenn/image/fetch/s--cD3UIEKK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/10cf30e300.jpeg)
ルーティング
go_router | Flutter Package
簡単なサンプル実装
pubspec.yaml
dependencies:
go_router: ^4.4.1
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp.router(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
routeInformationProvider: _router.routeInformationProvider,
routeInformationParser: _router.routeInformationParser,
routerDelegate: _router.routerDelegate,
);
}
}
final GoRouter _router = GoRouter(
routes: <GoRoute>[
GoRoute(
path: '/',
builder: (BuildContext context, GoRouterState state) {
return const HomePage();
},
),
GoRoute(
path: '/user',
builder: (BuildContext context, GoRouterState state) {
return const UserPage();
},
),
],
);
class HomePage extends StatelessWidget {
const HomePage({super.key});
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'HomePage',
),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
child: const Text('UserPageへ'),
onPressed: () => context.go("/user"),
),
),
);
}
}
class UserPage extends StatelessWidget {
const UserPage({super.key});
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'UserPage',
),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
child: const Text('HomePageへ'),
onPressed: () => context.go("/"),
),
),
);
}
}
↓実際に動作させた画面
通常のWebページみたくhistoryをたどれるし、直リンクもできる。
サブルート定義
リダイレクト時の認証チェック
このスクラップは2022/09/19にクローズされました