• 1000 картина. Я пытаюсь реализовать этот интерфейс во флаттере для android и iOS, но мне не удалось запустить новую страницу из-за строки состояния:


what I've managed to do so far is to set the transparency so that when I scroll down the page the picture goes behind the status bar, BUT, it doesn't START that way, so I want to position my widget where it starts from the beginning of an Android/iOS device.
here's my code for the main ScreenWidget and ShowcaseWidget:
Showcase:
import 'package:flutter/material.dart';
import 'package:flutter_travel_ui_starter/models/movie_model.dart';
class MovieShowcase extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
top: false,
child: Container(
height: 400,
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
Movie movie = movies[index];
return ClipRect(
child: Image(
image: movie.imageUrl,
fit: BoxFit.fitWidth,
),
);
},
)),
);
}
}
ScreenWidget:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_travel_ui_starter/widgets/movie-showcase.dart';
class MovieDetails extends StatefulWidget {
@override
_MovieDetails createState() => _MovieDetails();
}
class _MovieDetails extends State {
@override
Widget build(BuildContext context) {
return AnnotatedRegion(
value: SystemUiOverlayStyle(
statusBarIconBrightness: Brightness.light,
statusBarColor: Colors.transparent,
statusBarBrightness: Brightness.light,
),
child: Container(
height: 500,
decoration: BoxDecoration(color: Colors.black),
child: Container(
child: MovieShowcase(),
),
),
);
}
}
And here's the output:
Android:

iOS:
введите описание изображения здесь