実現したいこと
- AppBarの上部分だけ角丸にする。
前提
FlutterでAppBarのUIを改良しています。
以下のページを参考にしながら、appBarを改良している状況です。
参考ページのようにコーディングしたものの、角が丸くならないので、
20分ほどしても状況が改善しないので有識者の方に教えていただきたいと考えています。
発生している問題・エラーメッセージ
AppBarの上部分だけ角丸にしたいが実現しない。
該当のソースコード
post_page.dart
1import 'dart:io'; 2 3import 'package:chat_app/firestore/post_firestore.dart'; 4import 'package:chat_app/model/post.dart'; 5import 'package:chat_app/utils/authentication.dart'; 6import 'package:chat_app/utils/function_utils.dart'; 7import 'package:cloud_firestore/cloud_firestore.dart'; 8import 'package:flutter/material.dart'; 9 10class PostPage extends StatefulWidget { 11 const PostPage({super.key}); 12 13 @override 14 State<PostPage> createState() => _PostPageState(); 15} 16 17class _PostPageState extends State<PostPage> { 18 TextEditingController contentController = TextEditingController(); 19 File? image; 20 21 @override 22 Widget build(BuildContext context) { 23 return Scaffold( 24 appBar: AppBar( 25 shape: const RoundedRectangleBorder( 26 borderRadius: BorderRadius.only( 27 topLeft: Radius.circular(100), 28 topRight: Radius.circular(100), 29 ), 30 ), 31 backgroundColor: Colors.transparent, 32 elevation: 0, 33 iconTheme: const IconThemeData( 34 color: Colors.black, 35 ), 36 centerTitle: false, 37 title: const Text( 38 "Create post", 39 style: TextStyle( 40 color: Colors.black, 41 fontWeight: FontWeight.bold, 42 ), 43 ), 44 actions: [ 45 ElevatedButton( 46 onPressed: () async { 47 if (contentController.text.isNotEmpty && image != null) { 48 Post newPost = Post( 49 content: contentController.text, 50 postAccountId: Authentication.myAccount!.id, 51 id: '', 52 imagePath: '', 53 postTime: Timestamp.now(), 54 ); 55 var result = await PostFirestore.addPost(newPost); 56 if (result == true) { 57 if (!mounted) return; 58 Navigator.pop(context); 59 } 60 } 61 }, 62 child: const Text( 63 "Post", 64 style: TextStyle( 65 color: Colors.black, 66 fontWeight: FontWeight.bold, 67 fontSize: 20, 68 ), 69 ), 70 ), 71 ], 72 ), 73 body: Padding( 74 padding: const EdgeInsets.all(16.0), 75 child: Column( 76 children: [ 77 Expanded( 78 child: TextField( 79 controller: contentController, 80 maxLines: null, 81 decoration: const InputDecoration( 82 hintText: "What's on your mind?", 83 border: InputBorder.none, 84 ), 85 cursorColor: Colors.black, 86 ), 87 ), 88 const SizedBox( 89 height: 30, 90 ), 91 image == null 92 ? const SizedBox() 93 : SizedBox( 94 height: MediaQuery.of(context).size.height * 0.3, 95 width: MediaQuery.of(context).size.width * 0.9, 96 child: Image.file( 97 image!, 98 fit: BoxFit.cover, 99 ), 100 ), 101 const Divider(height: 1), 102 ListTile( 103 leading: const Icon(Icons.photo_library), 104 title: const Text("Add a photo"), 105 onTap: () async { 106 var result = await FunctionUtils.getImageFromGallery(); 107 setState(() { 108 image = File(result.path); 109 }); 110 }, 111 ), 112 ], 113 ), 114 ), 115 ); 116 } 117} 118
試したこと
appbarの上部分だけ丸くしたく、以下のページを見ながらコーディングしました。
https://www.choge-blog.com/programming/flutterappbar-rounded-border/
https://qiita.com/nR9h3kLy/items/26bcbc94bc2008748310
補足情報(FW/ツールのバージョンなど)
[✓] Flutter (Channel stable, 3.7.8, on macOS 13.2.1 22D68 darwin-x64,
locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version
32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.76.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。