diff --git a/packages/mottai_flutter_app/lib/host/ui/host.dart b/packages/mottai_flutter_app/lib/host/ui/host.dart index ddef45d8..4e5f3d8a 100644 --- a/packages/mottai_flutter_app/lib/host/ui/host.dart +++ b/packages/mottai_flutter_app/lib/host/ui/host.dart @@ -3,12 +3,13 @@ import 'package:dart_flutter_common/dart_flutter_common.dart'; import 'package:firebase_common/firebase_common.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; +import 'package:gap/gap.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import '../../auth/auth.dart'; import '../../job/job.dart'; import '../../user/host.dart'; -import '../../user/user_mode.dart'; +import '../../user/ui/user_mode.dart'; import 'create_or_update_host.dart'; /// ホストページ。 @@ -28,6 +29,23 @@ class HostPage extends ConsumerWidget { /// パスパラメータから得られるユーザーの ID. final String userId; + @override + Widget build(BuildContext context, WidgetRef ref) { + return Scaffold( + // TODO: マイアカウントページで AppBar が二重にならないように対応する。 + appBar: AppBar(title: const Text('ホスト')), + body: HostPageBody(userId: userId), + ); + } +} + +/// [HostPage] のコンテンツ。マイアカウントページでは、[HostPageBody] のみを共通 +/// コンポーネントとして利用するためこのように分離している。 +class HostPageBody extends ConsumerWidget { + const HostPageBody({super.key, required this.userId}); + + final String userId; + @override Widget build(BuildContext context, WidgetRef ref) { final hostImageUrl = ref.watch(hostImageUrlProvider(userId)); @@ -35,247 +53,206 @@ class HostPage extends ConsumerWidget { final loggedInUserId = ref.watch(userIdProvider); final isMatchingUserId = loggedInUserId == userId; final readHost = ref.watch(hostFutureProvider(userId)); - final currentUserMode = ref.watch(userModeStateProvider); - return Scaffold( - appBar: AppBar( - title: const Text('アカウント'), - ), - body: SingleChildScrollView( - child: Padding( - padding: const EdgeInsets.all(12), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - children: [ - GenericImage.circle( - imageUrl: hostImageUrl, - ), - const SizedBox(width: 12), - Text( - hostDisplayName, - style: Theme.of(context) - .textTheme - .headlineLarge! - .copyWith(fontWeight: FontWeight.bold), - ), - if (isMatchingUserId) - Expanded( - child: Align( - alignment: Alignment.centerRight, - child: CircleAvatar( - backgroundColor: Theme.of(context).focusColor, - child: IconButton( - color: Theme.of(context).shadowColor, - onPressed: () => context.router.pushNamed( - CreateOrUpdateHostPage.location( - userId: userId, - actionType: ActionType.update.name, - ), - ), - icon: const Icon(Icons.edit), - ), - ), - ), - ), - ], - ), - if (isMatchingUserId) ...[ - const SizedBox( - height: 12, + return SingleChildScrollView( + // TODO: Divider は横いっぱいに表示したいので Padding の水平方向の全体適用はやめたい。 + child: Padding( + padding: const EdgeInsets.all(16), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + GenericImage.circle( + imageUrl: hostImageUrl, ), - Section( - titleBottomMargin: 4, - title: 'ユーザーモード', - content: Text( - currentUserMode == UserMode.host - ? ''' -ホストとしてアプリを使用します。あなたが募集するお手伝いに興味があるワーカーとやりとりをして、お手伝いを受け入れるモードです。''' - : 'ワーカーとしてアプリを使用します。興味のあるホストやお手伝いを探して、お手伝いに応募するモードです。', + const Gap(16), + Expanded( + child: Text( + hostDisplayName, + style: Theme.of(context).textTheme.titleLarge, + maxLines: 1, + overflow: TextOverflow.ellipsis, ), ), - SegmentedButton( - style: ButtonStyle( - shape: MaterialStateProperty.all( - RoundedRectangleBorder( - borderRadius: BorderRadius.circular(12), + if (isMatchingUserId) + CircleAvatar( + backgroundColor: Theme.of(context).focusColor, + child: IconButton( + color: Theme.of(context).shadowColor, + onPressed: () => context.router.pushNamed( + CreateOrUpdateHostPage.location( + userId: userId, + actionType: ActionType.update.name, + ), ), + icon: const Icon(Icons.edit), ), ), - segments: const >[ - ButtonSegment( - value: UserMode.host, - label: Text('ホスト'), - ), - ButtonSegment( - value: UserMode.worker, - label: Text('ワーカー'), - ), - ], - selected: {currentUserMode}, - onSelectionChanged: (newSelection) { - ref - .read(userModeStateProvider.notifier) - .update((_) => newSelection.first); - }, - ), ], - const SizedBox(height: 24), - // TODO 自己紹介をDBに追加する - const Section( - titleBottomMargin: 4, - title: '自己紹介', - content: Text( - ''' + ), + if (isMatchingUserId) ...[ + const Gap(16), + const UserModeSection(), + ], + const SizedBox(height: 24), + // TODO 自己紹介をDBに追加する + Section( + title: '自己紹介', + titleStyle: Theme.of(context).textTheme.titleLarge, + titleBottomMargin: 8, + content: const Text( + ''' 神奈川県小田原市で農家や漁師をしています。夏の時期にレモンの収穫のお手伝いをしてくれる方を募集しています。こんな感じでここには自己紹介文を表示する。表示するのは最大 8 行表くらいでいいだろうか。あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、わをん、あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ...''', - ), ), - const SizedBox(height: 24), - const Section( - titleBottomMargin: 4, - title: 'ホストタイプ', - content: Text('ワーカーはホストタイプ（複数選択可）を参考にして、興味のあるお手伝いを探します。'), - ), - readHost.when( - data: (readHost) { - if (readHost == null) { - return const Center( - child: Text('ホストタイプがありません。'), - ); - } - return SelectableChips( - allItems: HostType.values, - labels: Map.fromEntries( - HostType.values.map( - (type) => MapEntry(type, type.label), - ), - ), - enabledItems: readHost.hostTypes, + ), + const SizedBox(height: 24), + Section( + title: 'ホストタイプ', + titleStyle: Theme.of(context).textTheme.titleLarge, + titleBottomMargin: 8, + content: const Text('ワーカーはホストタイプ（複数選択可）を参考にして、興味のあるお手伝いを探します。'), + ), + readHost.when( + data: (readHost) { + if (readHost == null) { + return const Center( + child: Text('ホストタイプがありません。'), ); - }, - loading: () => const Center(child: CircularProgressIndicator()), - error: (error, stackTrace) => const Center( - child: Text('通信に失敗しました。'), - ), + } + return SelectableChips( + allItems: HostType.values, + labels: Map.fromEntries( + HostType.values.map( + (type) => MapEntry(type, type.label), + ), + ), + enabledItems: readHost.hostTypes, + ); + }, + loading: () => const Center(child: CircularProgressIndicator()), + error: (error, stackTrace) => const Center( + child: Text('通信に失敗しました。'), ), - const SizedBox(height: 24), - const Section( - titleBottomMargin: 4, - title: '公開する場所・住所', - content: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text(''' + ), + const SizedBox(height: 24), + Section( + title: '公開する場所・住所', + titleStyle: Theme.of(context).textTheme.titleLarge, + titleBottomMargin: 8, + content: const Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text(''' 農場や主な作業場所などの、公開される場所・住所です。ワーカーは地図上から近所や興味がある地域のホストを探します。必ずしも正確で細かい住所である必要はありません。'''), - SizedBox(height: 12), - // TODO ここは後でデータを取得する - Text('神奈川県小田原市石322 (hostLocation.address)'), - ], - ), - ), - const Divider( - height: 36, + SizedBox(height: 12), + // TODO ここは後でデータを取得する + Text('神奈川県小田原市石322 (hostLocation.address)'), + ], ), - Section( - titleBottomMargin: 4, - title: '掲載中のお手伝い募集', - content: ref.watch(userJobsFutureProvider(userId)).when( - data: (jobs) { - if (jobs.isEmpty) { - return const Center( - child: Text('掲載中のお手伝いがありません。'), - ); - } - final list_ = jobs.map( - (job) { - return MaterialHorizontalCard( - title: job.title, - description: job.content, - // TODO 掲載中のお仕事ごとに画像があってもいいかも - imageUrl: - 'https://image.space.rakuten.co.jp/d/strg/ctrl/9/640594311698c5a7d384759ef33cd4c313b50f29.96.9.9.3.jpeg', - ); - }, - ).toList(); - return Column( - children: list_, + ), + const Divider( + height: 36, + ), + Section( + title: '掲載中のお手伝い募集', + titleStyle: Theme.of(context).textTheme.titleLarge, + titleBottomMargin: 8, + content: ref.watch(userJobsFutureProvider(userId)).when( + data: (jobs) { + if (jobs.isEmpty) { + return const Center( + child: Text('掲載中のお手伝いがありません。'), ); - }, - loading: () => - const Center(child: CircularProgressIndicator()), - error: (error, stackTrace) => const Center( - child: Text('通信に失敗しました。'), - ), + } + final list_ = jobs.map( + (job) { + return MaterialHorizontalCard( + title: job.title, + description: job.content, + // TODO 掲載中のお仕事ごとに画像があってもいいかも + imageUrl: + 'https://image.space.rakuten.co.jp/d/strg/ctrl/9/640594311698c5a7d384759ef33cd4c313b50f29.96.9.9.3.jpeg', + ); + }, + ).toList(); + return Column( + children: list_, + ); + }, + loading: () => + const Center(child: CircularProgressIndicator()), + error: (error, stackTrace) => const Center( + child: Text('通信に失敗しました。'), ), - ), - if (isMatchingUserId) ...[ - const Divider( - height: 36, - ), - const Section( - title: 'ソーシャル連携', - content: Column( - children: [ - Row( - children: [ - FaIcon( - FontAwesomeIcons.google, - size: 30, - ), - SizedBox(width: 10), - Text('Google'), - // TODO google連携済みかどうかで出し分けられるようにする - Expanded( - child: Align( - alignment: Alignment.centerRight, - child: Text('連携済み'), - ), - ), - ], - ), - SizedBox(height: 12), - Row( - children: [ - FaIcon( - FontAwesomeIcons.apple, - size: 40, - ), - SizedBox(width: 10), - Text('Apple'), - // TODO apple連携済みかどうかで出し分けられるようにする - Expanded( - child: Align( - alignment: Alignment.centerRight, - child: Text('連携済み'), - ), + ), + ), + if (isMatchingUserId) ...[ + const Divider(height: 36), + Section( + title: 'ソーシャル連携', + titleStyle: Theme.of(context).textTheme.titleLarge, + content: const Column( + children: [ + Row( + children: [ + FaIcon( + FontAwesomeIcons.google, + size: 30, + ), + SizedBox(width: 10), + Text('Google'), + // TODO google連携済みかどうかで出し分けられるようにする + Expanded( + child: Align( + alignment: Alignment.centerRight, + child: Text('連携済み'), ), - ], - ), - SizedBox(height: 12), - Row( - children: [ - FaIcon( - FontAwesomeIcons.line, - color: Color(0xff06c755), - size: 30, + ), + ], + ), + SizedBox(height: 12), + Row( + children: [ + FaIcon( + FontAwesomeIcons.apple, + size: 40, + ), + SizedBox(width: 10), + Text('Apple'), + // TODO apple連携済みかどうかで出し分けられるようにする + Expanded( + child: Align( + alignment: Alignment.centerRight, + child: Text('連携済み'), ), - SizedBox(width: 10), - Text('LINE'), - // TODO line連携済みかどうかで出し分けられるようにする - Expanded( - child: Align( - alignment: Alignment.centerRight, - child: Text('連携済み'), - ), + ), + ], + ), + SizedBox(height: 12), + Row( + children: [ + FaIcon( + FontAwesomeIcons.line, + color: Color(0xff06c755), + size: 30, + ), + SizedBox(width: 10), + Text('LINE'), + // TODO line連携済みかどうかで出し分けられるようにする + Expanded( + child: Align( + alignment: Alignment.centerRight, + child: Text('連携済み'), ), - ], - ) - ], - ), + ), + ], + ) + ], ), - ], + ), ], - ), + const Gap(32), + ], ), ), ); diff --git a/packages/mottai_flutter_app/lib/my_account/ui/my_account.dart b/packages/mottai_flutter_app/lib/my_account/ui/my_account.dart index b942596e..c03e3e41 100644 --- a/packages/mottai_flutter_app/lib/my_account/ui/my_account.dart +++ b/packages/mottai_flutter_app/lib/my_account/ui/my_account.dart @@ -1,9 +1,15 @@ import 'package:auto_route/auto_route.dart'; import 'package:flutter/material.dart'; +import 'package:hooks_riverpod/hooks_riverpod.dart'; + +import '../../auth/ui/auth_dependent_builder.dart'; +import '../../host/ui/host.dart'; +import '../../user/user_mode.dart'; +import '../../worker/ui/worker.dart'; /// マイアカウントページ。中身は Worker や Host の詳細画面を構成するウィジェットを使用する。 @RoutePage() -class MyAccountPage extends StatelessWidget { +class MyAccountPage extends ConsumerWidget { const MyAccountPage({super.key}); /// [AutoRoute] で指定するパス文字列。 @@ -13,7 +19,17 @@ class MyAccountPage extends StatelessWidget { static const location = path; @override - Widget build(BuildContext context) { - return const SizedBox(); + Widget build(BuildContext context, WidgetRef ref) { + final userMode = ref.watch(userModeStateProvider); + return AuthDependentBuilder( + onAuthenticated: (userId) { + switch (userMode) { + case UserMode.worker: + return WorkerPageBody(userId: userId); + case UserMode.host: + return HostPageBody(userId: userId); + } + }, + ); } } diff --git a/packages/mottai_flutter_app/lib/user/ui/user_mode.dart b/packages/mottai_flutter_app/lib/user/ui/user_mode.dart new file mode 100644 index 00000000..9c446a64 --- /dev/null +++ b/packages/mottai_flutter_app/lib/user/ui/user_mode.dart @@ -0,0 +1,59 @@ +import 'package:dart_flutter_common/dart_flutter_common.dart'; +import 'package:flutter/material.dart'; +import 'package:gap/gap.dart'; +import 'package:hooks_riverpod/hooks_riverpod.dart'; + +import '../user_mode.dart'; + +/// ワーカーページ、ホストページなどで使用する、[UserMode] を選択する [Section]. +class UserModeSection extends ConsumerWidget { + const UserModeSection({super.key}); + + @override + Widget build(BuildContext context, WidgetRef ref) { + final userMode = ref.watch(userModeStateProvider); + // TODO:「自分かどうか Builder」を使用する。 + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Section( + titleBottomMargin: 8, + title: 'ユーザーモード', + titleStyle: Theme.of(context).textTheme.titleLarge, + content: Text( + userMode == UserMode.host + ? ''' +ホストとしてアプリを使用します。あなたが募集するお手伝いに興味があるワーカーとやりとりをして、お手伝いを受け入れるモードです。''' + : 'ワーカーとしてアプリを使用します。興味のあるホストやお手伝いを探して、お手伝いに応募するモードです。', + ), + ), + const Gap(8), + SegmentedButton( + style: ButtonStyle( + shape: MaterialStateProperty.all( + RoundedRectangleBorder( + borderRadius: BorderRadius.circular(12), + ), + ), + ), + segments: const >[ + ButtonSegment( + value: UserMode.host, + label: Text('ホスト'), + ), + ButtonSegment( + value: UserMode.worker, + label: Text('ワーカー'), + ), + ], + selected: {userMode}, + onSelectionChanged: (newSelection) { + ref + .read(userModeStateProvider.notifier) + .update((_) => newSelection.first); + }, + ) + ], + ); + } +} diff --git a/packages/mottai_flutter_app/lib/worker/ui/worker.dart b/packages/mottai_flutter_app/lib/worker/ui/worker.dart index b5a708a1..edf5ff51 100644 --- a/packages/mottai_flutter_app/lib/worker/ui/worker.dart +++ b/packages/mottai_flutter_app/lib/worker/ui/worker.dart @@ -2,10 +2,12 @@ import 'package:auto_route/auto_route.dart'; import 'package:dart_flutter_common/dart_flutter_common.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; +import 'package:gap/gap.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import '../../auth/auth.dart'; import '../../host/ui/create_or_update_host.dart'; +import '../../user/ui/user_mode.dart'; import '../../user/user.dart'; import '../../user/worker.dart'; import 'create_or_update_worker.dart'; @@ -27,6 +29,22 @@ class WorkerPage extends ConsumerWidget { /// パスパラメータから得られるユーザーの ID. final String userId; + @override + Widget build(BuildContext context, WidgetRef ref) { + return Scaffold( + appBar: AppBar(title: const Text('ワーカー')), + body: WorkerPageBody(userId: userId), + ); + } +} + +/// [WorkerPage] のコンテンツ。マイアカウントページでは、[WorkerPageBody] のみを共通 +/// コンポーネントとして利用するためこのように分離している。 +class WorkerPageBody extends ConsumerWidget { + const WorkerPageBody({super.key, required this.userId}); + + final String userId; + @override Widget build(BuildContext context, WidgetRef ref) { final workerImageUrl = ref.watch(workerImageUrlProvider(userId)); @@ -34,165 +52,162 @@ class WorkerPage extends ConsumerWidget { final loggedInUserId = ref.watch(userIdProvider); final isMatchingUserId = loggedInUserId == userId; final isHost = ref.watch(isHostProvider); - return Scaffold( - appBar: AppBar( - title: const Text('アカウント'), - ), - body: SingleChildScrollView( - child: Padding( - padding: const EdgeInsets.all(12), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - children: [ - GenericImage.circle( - imageUrl: workerImageUrl, - ), - const SizedBox(width: 12), - Text( + return SingleChildScrollView( + // TODO: Divider は横いっぱいに表示したいので Padding の水平方向の全体適用はやめたい。 + child: Padding( + padding: const EdgeInsets.all(16), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + GenericImage.circle( + imageUrl: workerImageUrl, + ), + const Gap(16), + Expanded( + child: Text( workerDisplayName, - style: Theme.of(context) - .textTheme - .headlineLarge! - .copyWith(fontWeight: FontWeight.bold), + style: Theme.of(context).textTheme.titleLarge, + maxLines: 1, + overflow: TextOverflow.ellipsis, ), - if (isMatchingUserId) - Expanded( - child: Align( - alignment: Alignment.centerRight, - child: CircleAvatar( - backgroundColor: Theme.of(context).focusColor, - child: IconButton( - color: Theme.of(context).shadowColor, - onPressed: () => context.router.pushNamed( - CreateOrUpdateWorkerPage.location(userId: userId), - ), - icon: const Icon(Icons.edit), - ), - ), + ), + if (isMatchingUserId) + CircleAvatar( + backgroundColor: Theme.of(context).focusColor, + child: IconButton( + color: Theme.of(context).shadowColor, + onPressed: () => context.router.pushNamed( + CreateOrUpdateWorkerPage.location(userId: userId), ), + icon: const Icon(Icons.edit), ), - ], - ), - const SizedBox( - height: 12, - ), - // TODO 自己紹介をDBに追加する - const Section( - titleBottomMargin: 4, - title: '自己紹介', - content: Text( - ''' + ), + ], + ), + if (isMatchingUserId) ...[ + const Gap(16), + const UserModeSection(), + ], + const Gap(16), + // TODO 自己紹介をDBに追加する + Section( + titleBottomMargin: 8, + title: '自己紹介', + titleStyle: Theme.of(context).textTheme.titleLarge, + content: const Text( + ''' 東京都内に住んでいます。農家さんや漁師さんのお手伝いをすることに興味があります。こんな感じでここには自己紹介文を表示する。表示するのは最大 8 行表くらいでいいだろうか。あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、わをん、あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、わをん、あいうえお、か...''', - ), ), + ), + const Divider( + height: 36, + ), + // TODO 投稿した感想をDBに追加する + Section( + titleBottomMargin: 8, + title: '投稿した感想', + titleStyle: Theme.of(context).textTheme.titleLarge, + content: const MaterialHorizontalCard( + title: '矢郷農園でレモンの収穫をお手...あああああああああああああああ', + description: '先週末、矢郷農園でレモンの収穫を...あああああああああああ', + imageUrl: + 'https://www.kaku-ichi.co.jp/media/wp-content/uploads/2020/02/20200226001.jpg', + ), + ), + if (isMatchingUserId) ...[ const Divider( height: 36, ), - // TODO 投稿した感想をDBに追加する - const Section( - titleBottomMargin: 4, - title: '投稿した感想', - content: MaterialHorizontalCard( - title: '矢郷農園でレモンの収穫をお手...あああああああああああああああ', - description: '先週末、矢郷農園でレモンの収穫を...あああああああああああ', - imageUrl: - 'https://www.kaku-ichi.co.jp/media/wp-content/uploads/2020/02/20200226001.jpg', - ), - ), - if (isMatchingUserId) ...[ - const Divider( - height: 36, - ), - const Section( - title: 'ソーシャル連携', - content: Column( - children: [ - Row( - children: [ - FaIcon( - FontAwesomeIcons.google, - size: 30, - ), - SizedBox(width: 10), - Text('Google'), - // TODO google連携済みかどうかで出し分けられるようにする - Expanded( - child: Align( - alignment: Alignment.centerRight, - child: Text('連携済み'), - ), - ), - ], - ), - SizedBox(height: 12), - Row( - children: [ - FaIcon( - FontAwesomeIcons.apple, - size: 40, - ), - SizedBox(width: 10), - Text('Apple'), - // TODO apple連携済みかどうかで出し分けられるようにする - Expanded( - child: Align( - alignment: Alignment.centerRight, - child: Text('連携済み'), - ), + Section( + title: 'ソーシャル連携', + titleStyle: Theme.of(context).textTheme.titleLarge, + content: const Column( + children: [ + Row( + children: [ + FaIcon( + FontAwesomeIcons.google, + size: 30, + ), + SizedBox(width: 10), + Text('Google'), + // TODO google連携済みかどうかで出し分けられるようにする + Expanded( + child: Align( + alignment: Alignment.centerRight, + child: Text('連携済み'), ), - ], - ), - SizedBox(height: 12), - Row( - children: [ - FaIcon( - FontAwesomeIcons.line, - color: Color(0xff06c755), - size: 30, + ), + ], + ), + SizedBox(height: 12), + Row( + children: [ + FaIcon( + FontAwesomeIcons.apple, + size: 40, + ), + SizedBox(width: 10), + Text('Apple'), + // TODO apple連携済みかどうかで出し分けられるようにする + Expanded( + child: Align( + alignment: Alignment.centerRight, + child: Text('連携済み'), ), - SizedBox(width: 10), - Text('LINE'), - // TODO line連携済みかどうかで出し分けられるようにする - Expanded( - child: Align( - alignment: Alignment.centerRight, - child: Text('連携済み'), - ), + ), + ], + ), + SizedBox(height: 12), + Row( + children: [ + FaIcon( + FontAwesomeIcons.line, + color: Color(0xff06c755), + size: 30, + ), + SizedBox(width: 10), + Text('LINE'), + // TODO line連携済みかどうかで出し分けられるようにする + Expanded( + child: Align( + alignment: Alignment.centerRight, + child: Text('連携済み'), ), - ], - ) - ], - ), + ), + ], + ) + ], ), - if (!isHost) ...[ - const Divider( - height: 36, - ), - const Section( - titleBottomMargin: 4, - title: 'ホストとして登録', - content: Text( - ''' + ), + if (!isHost) ...[ + const Divider(height: 36), + Section( + title: 'ホストとして登録', + titleStyle: Theme.of(context).textTheme.titleLarge, + titleBottomMargin: 8, + content: const Text( + ''' ホスト（農家、猟師、猟師など）として登録・利用しますか？ホストとして利用すると、自分の農園や仕事の情報を掲載して、お手伝いをしてくれるワーカーとマッチングしますか？''', - ), ), - Align( - child: ElevatedButton( - onPressed: () => context.router.pushNamed( - CreateOrUpdateHostPage.location( - userId: userId, - actionType: ActionType.create.name, - ), + ), + Align( + child: ElevatedButton( + onPressed: () => context.router.pushNamed( + CreateOrUpdateHostPage.location( + userId: userId, + actionType: ActionType.create.name, ), - child: const Text('ホストとして登録'), ), + child: const Text('ホストとして登録'), ), - ], + ), ], ], - ), + const Gap(32), + ], ), ), );