Флаттер: Как сделать виджет всегда выше тени

#flutter #dart #dropshadow

Вопрос:

У меня есть приложение с двумя контейнерами рядом друг с другом/друг над другом с виджетами строк()/столбцов() соответственно. Оба контейнера имеют тени в параметре оформления коробки. Если они находятся близко друг к другу, тот, что сверху/слева, отбрасывает тень на другой.

Есть ли способ сделать так, чтобы на виджете не были нарисованы тени?

Редактировать: вот пример того, что я имею в виду.

Я не хочу, чтобы первый контейнер имел тень от второго контейнера, а скорее, чтобы оба контейнера находились над тенями.

Вот код для этого примера: вы можете скопировать и вставить его в dartpad.dev для быстрого тестирования.

 import 'package:flutter/material.dart';

final Color darkBlue = Colors.grey[200]!;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Row(
            children: [
              SizedBox(width: 20),
              Container(
                height: 100,
                width: 300,
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [BoxShadow(
                    blurRadius: 20,
                    color: Colors.black.withOpacity(0.6)
                  )]
                ),
              ),
              Container(
                height: 100,
                width: 300,
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [BoxShadow(
                    blurRadius: 20,
                    color: Colors.black
                  )]
                ),
              ),
            ]
          ),
        ),
      ),
    );
  }
}

1. вы пробовали удалить тень из их параметра оформления коробки?

2. @Аднан, но я хочу, чтобы у них были тени. Я хочу, чтобы у ящиков была тень, я просто не хочу, чтобы тень падала на другие контейнеры. Есть ли способ, которым я могу это сделать?

3. пожалуйста, предоставьте какой-нибудь код

4. @Adnan Всего 2 контейнера в ряд с украшением коробки, которое имеет одну тень коробки.

5. @Adnan Я обновил вопрос примером, в котором есть код и скриншот проблемы.

Ответ №1:

если у них обоих есть свои собственные тени, я думаю, что нет никакого способа добиться того, чего вы хотите.

альтернативным способом может быть передача тени родителю, вот пример кода:

 import 'package:flutter/material.dart';

final Color darkBlue = Colors.grey[200]!;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(blurRadius: 20, color: Colors.black),
              ],
            ),
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    height: 100,
                    width: 300,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(width: .2),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 100,
                    width: 300,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(width: .2),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Я завернул каждый из них Expanded , чтобы убедиться, что он заполняет родительский.

1. Большое вам спасибо за помощь! К сожалению, это не сработает. Код, который я показал, является всего лишь примером, но в моем реальном приложении у меня есть виджеты с их собственными тенями, и они являются виджетами с отслеживанием состояния, поэтому они меняются, поэтому я не могу просто обернуть их, как это сделали вы. Есть ли способ убедиться, что контейнеры, которые у меня есть, всегда находятся поверх теней? Например, есть ли свойство или какой-то тип виджета, который всегда находится над тенями или на нем не могут быть нарисованы тени?