Тень коробки при трепете не отображается - PullRequest
Новая
       134

Тень коробки при трепете не отображается

0 голосов
/ 21 июня 2020
• 1000 код файла выглядит следующим образом: 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Homepage(),
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
  ));
}

// Stateless widget=>created using a shortcut-stle
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // return Container(
    //   color: Colors.blue,
    //   child: Text("Hi Flutter App"),
    // );

    //Scaffold has prebuild some widget themes
    return Scaffold(
      appBar: AppBar(
        title: Text("My App"),
      ),

      // Container is similiar to <Div>
      body: Center(
        child: Container(
            width: 100,
            height: 100,
            alignment: Alignment.center,
            padding: const EdgeInsets.all(8),
            // color: Colors.pink,
            clipBehavior: Clip.antiAlias,
            decoration: BoxDecoration(
                color: Colors.pink,
                // shape: BoxShape.circle,
                borderRadius: BorderRadius.circular(11),
                boxShadow: [
                  BoxShadow(
                      color: Colors.black,
                      blurRadius: 10.5,
                      spreadRadius: 2.2,
                      offset: Offset(5.0, 5.0))
                ]),
            child: Text("This is a box")),
      ),
    );
  }
}

Заранее спасибо, пожалуйста, дайте мне краткий ответ, или вы можете дать несколько ссылок для посещения и изучения материалов

Ответы [ 2 ]

2 голосов
/ 21 июня 2020

Если вам нужна тень, не используйте clipBehavior: Clip.antiAlias эту строку, так как она удалит все пиксели, которые находятся вне границ контейнера (включая тень) 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Homepage(),
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
  ));
}

// Stateless widget=>created using a shortcut-stle
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // return Container(
    //   color: Colors.blue,
    //   child: Text("Hi Flutter App"),
    // );

    //Scaffold has prebuild some widget themes
    return Scaffold(
      appBar: AppBar(
        title: Text("My App"),
      ),

      // Container is similiar to <Div>
      body: Center(
        child: Container(
          width: 100,
          height: 100,
          alignment: Alignment.center,
          padding: const EdgeInsets.all(8),
          // color: Colors.pink,
          // clipBehavior: Clip.antiAlias, //Dont use this line
          decoration: BoxDecoration(
            color: Colors.pink,
            // shape: BoxShape.circle,
            borderRadius: BorderRadius.circular(11),
            boxShadow: [
              BoxShadow(
                color: Colors.black,
                blurRadius: 10.5,
                spreadRadius: 2.2,
                offset: Offset(5.0, 5.0),
              )
            ],
          ),
          child: Text("This is a box"),
        ),
      ),
    );
  }
}
1 голос
/ 21 июня 2020 
Container(
              width: 100,
              height: 100,
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8),
              // color: Colors.pink,
              //clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                  color: Colors.pink,
                  // shape: BoxShape.circle,
                  borderRadius: BorderRadius.circular(11),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black,
                        blurRadius: 10.5,
                        spreadRadius: 2.2,
                        offset: Offset(5.0, 5.0))
                  ]),
              child: Text("This is a box")),

Решение: Вы должны деактивировать Clip.antiAlias. Надеюсь, это поможет!

...