Сделайте два угла закругленными и два прямых среза вместо изгиба в флаттере - PullRequest
1 голос
/ 06 марта 2020

enter image description here

Как сделать под плиткой дизайн, похожий на флаттер, две стороны немного изогнуты, а остальные две стороны ровные с мягкой кривой. Я могу сделать два закругленных угла и два незаземленных, но не могу сделать как ниже одного. Кто-нибудь знает, как сделать плитку, как это. Я использовал RoundRect, ClipRRect и Container, но не смог сделать виджет таким. Любая помощь будет ощутимой.

Спасибо за ваше время и усилия заранее.

1 Ответ

3 голосов
/ 06 марта 2020

Вот как вы это делаете:

            Material(
              clipBehavior: Clip.antiAlias,
              shape: BeveledRectangleBorder(
                 // side: BorderSide(color: Colors.blue), if you need
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20.0),
                      bottomRight: Radius.circular(20.0))),
              child: Container(
                height: 100,
                width: 100,
               decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(15.0),
                        ),
              ),
            ),

Вот код изображения, которое вы предоставили, если вам нужно его реализовать:

            Row(
              children: <Widget>[
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Material(
                      clipBehavior: Clip.antiAlias,
                      shape: BeveledRectangleBorder(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(20.0),
                              bottomRight: Radius.circular(20.0))),
                      child: Container(
                        height: 100,
                        decoration: BoxDecoration(
                          color: Colors.blue,
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Material(
                      clipBehavior: Clip.antiAlias,
                      shape: BeveledRectangleBorder(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(20.0),
                              bottomRight: Radius.circular(20.0))),
                      child: Container(
                        height: 100,
                        decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Material(
                      clipBehavior: Clip.antiAlias,
                      shape: BeveledRectangleBorder(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(20.0),
                              bottomRight: Radius.circular(20.0))),
                      child: Container(
                        height: 100,
                        decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
...