質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

1072閲覧

flutter: カレンダーの下部にリストを表示してスクロールするとリストの背景の色がカレンダーの下に表示されてしまう

ouma

総合スコア15

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2022/09/12 03:42

前提

カレンダーの下にリストを表示して、
リストの項目毎に背景色を変更する

実現したいこと

リストをスクロールすると、文字はカレンダーに隠れて消えていくのに
背景色だけカレンダーを透過して見えてしまう

発生している問題・エラーメッセージ

特にエラーメッセージが発生しているわけではありません

該当のソースコード

dart

1import 'package:flutter/material.dart'; 2import 'package:table_calendar/table_calendar.dart'; 3import 'package:flutter/cupertino.dart'; 4import 'dart:collection'; 5import 'package:intl/intl.dart'; 6 7void main() { 8 runApp(const MyApp()); 9} 10 11class MyApp extends StatelessWidget { 12 const MyApp({Key? key}) : super(key: key); 13 14 // This widget is the root of your application. 15 16 Widget build(BuildContext context) { 17 return MaterialApp( 18 title: 'Flutter Demo', 19 theme: ThemeData( 20 21 primarySwatch: Colors.blue, 22 ), 23 home: const MyHomePage(title: 'Flutter Demo Home Page'), 24 ); 25 } 26} 27 28class MyHomePage extends StatefulWidget { 29 const MyHomePage({Key? key, required this.title}) : super(key: key); 30 31 final String title; 32 33 34 State<MyHomePage> createState() => _MyHomePageState(); 35} 36 37class _MyHomePageState extends State<MyHomePage> { 38 39 DateTime now_time = DateTime.now(); 40 late DateTime _focused; 41 DateTime? _selected; 42 43 44 void initState() { 45 // TODO: implement initState 46 super.initState(); 47 _focused = DateTime(now_time.year, now_time.month, now_time.day); 48 } 49 50 51 Widget build(BuildContext context) { 52 53 return Scaffold( 54 appBar: AppBar( 55 56 title: Text(widget.title), 57 ), 58 body: Column( 59 children: [ 60 Expanded( 61 child: TableCalendar( 62 headerStyle: HeaderStyle( 63 formatButtonVisible: false, 64 ), 65 rowHeight: 32, 66 daysOfWeekHeight: 16, 67 firstDay: DateTime.utc(2022, 4, 1), 68 lastDay: DateTime.utc(2025, 12, 31), 69 70 selectedDayPredicate: (day) { 71 return isSameDay(_selected, day); 72 }, 73 onDaySelected: (selected, focused) { 74 if (!isSameDay(_selected, selected)) { 75 setState(() { 76 _selected = selected; 77 _focused = focused; 78 }); 79 } 80 }, 81 focusedDay: _focused, 82 ), 83 ), 84 Expanded( 85 child: ListView.builder( 86 itemCount: 10, 87 itemBuilder: (BuildContext context,int index){ 88 return ListTile( 89 tileColor: index % 2==0 90 ? Colors.white 91 : Colors.black26, 92 title: Text('A'), 93 ); 94 }, 95 ) 96 ), 97 ], 98 ), 99 ); 100 } 101} 102 103

試したこと

scaffoldの背景を白や黒にしてみたが
結局透けることに変わりなかったです

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

1

ベストアンサー

不具合なのか仕様なのかは不明ですが、影響を与える側であるListViewをMaterialでラッピングし表示領域をクリッピングすることで、想定した動きになるのでは?と考えています。

dart

1 Expanded( 2 child: Material( 3 child: ListView.builder( 4 itemCount: 10,

投稿2022/09/12 07:48

ta.fu

総合スコア1655

ouma👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ouma

2022/09/13 14:36

ありがとうございます、実現したい動作になりました なぜ文字だけ消えて背景色は透けるような仕様になってるんですかねえ・・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。