Установите положение виджета на начало с начала строки состояния для Android и iOS? - PullRequest
0 голосов
/ 12 июля 2020
• 1000 картина. Я пытаюсь реализовать этот интерфейс во флаттере для android и iOS, но мне не удалось запустить новую страницу из-за строки состояния:

Aribnb: the status bar has no background, only shows the items and developers have managed to put the picture slider behind the status bar

another Airbnb screen in which the background brightness is set to dark and yet transparent but we see the same behavior

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:

enter image description here

iOS:

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

...