Пробую раскладывать экран календаря с флаттером. Но я не могу получить макет так, как хотелось бы ...
Думаю, мне не нравится:
- Второй столбец не примыкает к первый. У меня слишком много места между.
- У меня есть раздел прокрутки только в списке внизу. Я бы хотел прокрутить всю страницу
Вот несколько примеров изображений:
Поведение прокрутки
Как сделать так, чтобы второй элемент автоматически знал высоту первого элемента и автоматически помещался под ним? Без пробелов?
Вот мой код:
@override
Widget build(BuildContext context) {
final calendarEntriesData = Provider.of<CalendarEntries>(context);
void loadCalendarEntries(context) {
print("Geladen");
}
dayPressed(date, events) {
this.setState(() => _currentDate = date);
}
Future _buildCalendarEntries() async {
await calendarEntriesData.getAll();
}
void openMoreBottomSheet(currentCalendarEntry) {
showBarModalBottomSheet(
context: context,
expand: false,
builder: (BuildContext context, ScrollController scrollController) {
return CalendarEntryOptions(
scrollController, currentCalendarEntry, refreshStateCallback);
});
}
return Material(
child: CupertinoPageScaffold(
backgroundColor: Colors.white,
child: CustomScrollView(
slivers: <Widget>[
CupertinoSliverNavigationBar(
largeTitle:
Text("Kalender", style: TextStyle(color: Colors.white)),
backgroundColor: Theme.of(context).primaryColor,
),
SliverToBoxAdapter(
child: Container(
height: MediaQuery.of(context).size.height - 130,
child: Padding(
padding: const EdgeInsets.all(0),
child: Container(
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: CalendarCarousel(
customGridViewPhysics:
NeverScrollableScrollPhysics(),
pageScrollPhysics: PageScrollPhysics(),
weekdayTextStyle: TextStyle(
color: Theme.of(context).primaryColor),
daysTextStyle: TextStyle(
color: Theme.of(context).primaryColor),
todayButtonColor: Colors.transparent,
todayTextStyle: TextStyle(
color: Theme.of(context).accentColor,
fontWeight: FontWeight.bold),
weekendTextStyle:
TextStyle(color: Colors.black),
locale: "de",
selectedDayButtonColor: Theme.of(context)
.primaryColor
.withAlpha(30),
selectedDayTextStyle: TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold),
selectedDateTime: _currentDate,
markedDatesMap: _markedDateMap,
headerTextStyle: TextStyle(
color: Theme.of(context).primaryColor,
fontSize: 20),
iconColor: Theme.of(context).primaryColor,
onDayPressed:
(DateTime date, List<Event> events) =>
dayPressed(date, events),
onDayLongPressed: (DateTime date) =>
openNewEntryDialog(context, date),
markedDateIconBuilder: (event) => Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Theme.of(context)
.primaryColor
.withGreen(90)),
width: 4,
height: 4,
margin: EdgeInsets.only(right: 1)),
),
),
Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.only(top: 35),
child: FutureBuilder<List<CalendarEntry>>(
future: calendarEntriesData
.getCurrentMonthEntries(
_currentDate != null
? _currentDate
: DateTime.now()),
builder: (BuildContext context,
AsyncSnapshot<List<CalendarEntry>>
snapshot) {
if (!snapshot.hasData ||
snapshot.connectionState ==
ConnectionState.waiting) {
return Center(
child:
CircularProgressIndicator(),
);
} else {
return Container(
height: 100,
child: ListView.builder(
physics:
ClampingScrollPhysics(),
itemCount:
snapshot.data.length,
itemBuilder:
(BuildContext context,
int index) {
return ListTile(
title: Text(snapshot
.data[index]
.servicePartner
.toString()),
subtitle: snapshot
.data[index]
.dateTime ==
null
? Text("Unbekannt")
: Text(DateFormat(
"dd.MM.yyyy")
.format(DateTime
.parse(snapshot
.data[
index]
.dateTime))),
leading: CircleAvatar(
backgroundColor:
Theme.of(context)
.primaryColor,
child: Text(
(snapshot
.data[
index]
.minutes /
60)
.floor()
.toString(),
style: TextStyle(
color: Theme.of(
context)
.colorScheme
.onPrimary)),
),
trailing: Container(
width: 135,
child: Row(
mainAxisAlignment:
MainAxisAlignment
.end,
children: <Widget>[
Text(DateFormat(
"HH:mm")
.format(DateTime.parse(snapshot
.data[
index]
.dateTime)) +
" Uhr"),
IconButton(
icon: Icon(Icons
.more_vert),
onPressed: () =>
openMoreBottomSheet(
snapshot
.data[index]))
],
),
),
);
}));
}
})))
],
),
),
),
),
)
],
)));
}
PS: Я использую CustomScrollView из-за виджета CupertinoSliverNavigationBar для эффекта navigationBar .