Затемнить края изображения в трепетании? - PullRequest
Новая
       41

Затемнить края изображения в трепетании?

0 голосов
/ 26 мая 2018

Как добавить тени к краям изображения во флаттере, чтобы белый наложенный текст был читабельным?Я хочу, чтобы это выглядело так же, как в приложении «Контакты»: Shaded edges

Я уже проверил класс Image, но вижу только color и colorBlendMode , что было бы не самым простым способом сделать это, я уверен.

Ответы [ 2 ]

0 голосов
/ 01 августа 2019

Принятый ответ работает хорошо для меня.Но в моем случае изображение загружается через сеть, поэтому темный край виден даже тогда, когда изображение еще не показано, что мне не правильно.Поэтому у меня есть другой подход, использующий frameBuilder - который является одним из свойств Image.Еще один плюс этого метода - нам не нужно использовать Stack: 

Image.network(
        "https://foo.com/bar.jpg",
        width: double.infinity,
        height: expandedHeight,
        fit: BoxFit.fitWidth,
        frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) {
          if (wasSynchronouslyLoaded || frame != null) {
            return Container(
              child:child,
              foregroundDecoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        const Color(0xCC000000),
                        const Color(0x00000000),
                        const Color(0x00000000),
                        const Color(0xCC000000),                ]
                  )
              ),
              height: expandedHeight,
              width: double.infinity,
            );
          } else {
            return Container(
              child: CircularProgressIndicator(
                  value: null,
                  backgroundColor: Colors.white),
              alignment: Alignment(0, 0),
              constraints: BoxConstraints.expand(),
            );
          }
        },
      ),

. Используя этот фрагмент кода, я смог задержать отображение темного края до тех пор, пока изображение не будет показано.Если wasSynchronouslyLoaded равно true, то это означает, что изображение может быть загружено мгновенно, если оно ложно, мы должны полагаться на frame, чтобы определить, доступно ли изображение для отображения или нет.Если изображение еще не доступно, тогда в качестве заполнителя для изображения будет отображаться CircularProgressIndicator.

0 голосов
/ 26 мая 2018

Я решил свою проблему, используя следующий код.(При этом не используйте box-shadow. Это приводит ко всему темному): 

Stack(
  children: <Widget>[
    Image(
      fit: BoxFit.cover,
      image: AssetImage("assets/test.jpg"),
      height: MediaQuery.of(context).size.width * 0.8,
      width: MediaQuery.of(context).size.width,
    ),
    Container(
      height: MediaQuery.of(context).size.width * 0.8,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            const Color(0xCC000000),
            const Color(0x00000000),
            const Color(0x00000000),
            const Color(0xCC000000),
          ],
        ),
      ),
    ),
    new Padding(
      padding: const EdgeInsets.all(16.0),
      child: Text("TXT", style: Theme.of(context).primaryTextTheme.title,),
    ),
  ],
),
...