радиус границы не применяется внутри виджета контейнера

Question

Радиус границы не применяется внутри дочернего элемента Container. Пробовал с SizedBox & Stack виджетом. Мне нужен вид границы внутри контейнера.

Scaffold(
  appBar: AppBar(
    title: new Text("ListView"),
  ),
  body: Center(
      child: Padding(
        padding: EdgeInsets.all(15.0),
        child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15.0),
                border: Border.all(
                    color: Colors.green,
                    width: 2.0
                )
            ),
            child: Container(
              color: Colors.red,
            )
        ),
      )
  )
)

Answer 1

вместо

Контейнер

использование виджета

ClipRRect

До (не работает):

 Center(
        child: Container(
          decoration: BoxDecoration(
            borderRadius: _getAllRoundedBorderRadius(),
          ),
          child: Hero(
            tag: "CossackHero",
            child: TweenImage(
              last: AssetImage("images/background/cossack_0.jpg"),
              first: AssetImage("images/background/c_cossack_0.jpg"),
              duration: 2,
              height: height,
            ),
          ),
        ),
      ),

После того, как:

Center(
        child: ClipRRect(
          borderRadius: getAllRoundedBorderRadius(),
          child: Hero(
            tag: "CossackHero",
            child: TweenImage(
              last: AssetImage("images/background/cossack_0.jpg"),
              first: AssetImage("images/background/c_cossack_0.jpg"),
              duration: 2,
              height: height,
            ),
          ),
        ),
      ),

Answer 2

1001 * попробовать *

decoration: BoxDecoration(
                              gradient: new LinearGradient(
                                begin: Alignment.topCenter,
                                end: Alignment.bottomCenter,
                                stops: [0.02, 0.02],
                                colors: [Colors.red, Colors.white],
                              ),
                              borderRadius: BorderRadius.all(Radius.circular(10)),
                              color: Colors.white,
                              boxShadow: [
                                BoxShadow(color: Colors.grey, blurRadius: 5.0),
                              ],
                            ),

Answer 3

Замените ваш код этим

Scaffold(
appBar: AppBar(
title: new Text("ListView"),
),
body: Center(
  child: Padding(
    padding: EdgeInsets.all(15.0),
    child: Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15.0),
            border: Border.all(
                color: Colors.green,
                width: 2.0
            )
        ),
        child: Container(
              decoration: new BoxDecoration(borderRadius: 
        BorderRadius.circular(15.0),
                        color: Colors.red,),
                    )
    ),
  )
)
)

Answer 4

decoration нарисовано за ребенком. Если вы хотите, чтобы украшение было применено перед дочерним элементом контейнера, используйте foregroundDecoration

Scaffold(
  appBar: AppBar(
    title: new Text("ListView"),
  ),
  body: Center(
      child: Padding(
        padding: EdgeInsets.all(15.0),
        child: Container(
            foregroundDecoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15.0),
                border: Border.all(
                    color: Colors.green,
                    width: 2.0
                )
            ),
            child: Container(
              color: Colors.red,
            )
        ),
      )
  )
)

Код выше рисует границу перед дочерним контейнером. Обратите внимание, что даже при foregroundDecoration дочерний контейнер все равно будет иметь острые углы.

Если вы хотите, чтобы у дочернего контейнера были закругленные углы, вам нужно применить borderRadius к дочернему контейнеру или использовать ClipRRect с таким же радиусом границы, что и у родительского контейнера

Answer 5

Я думаю, ваш контейнер может просто не быть видимым, потому что у него нет дочернего элемента / высоты / ширины.

Попробуйте добавить Text как дочерний элемент или, если вы хотите, чтобы он расширился, вы можете принудительно вызвать с помощью SizedBox.expand .

См. этот ответ , например, о границах.