Как сделать пользовательский круг во флаттере

#flutter

Вопрос:

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

У меня проблема с созданием фона градиентного круга. Мой код выглядит так:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            decoration: BoxDecoration(
              gradient: gradient,
              borderRadius: BorderRadius.only(
                bottomLeft: const Radius.circular(1500.0),
                bottomRight: const Radius.circular(1500.0),
              ),
            ),
            height: 450,
            child: Center(
              child: Container(
                width: 195,
                height: 195,
                decoration: BoxDecoration(
                  color: Colors.white,
                  shape: BoxShape.circle,
                ),
                child: Image.asset(
                  'assets/logo_new.png',
                  width: 200,
                ),
              ),
            ),
          ),
          Container()
        ],
      ),
    );
  }

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

Кто-нибудь может помочь мне создать фон градиента круга и расположить белый круг внизу

ps: Я впервые задаю этот вопрос в StackOverflow, поэтому прошу прощения, если мой вопрос не имеет смысла. Спасибо!

Ответ №1:

Я бы предпочел использовать Positioned виджет внутри Stack и использовать MediaQuery.of(context).size для расчета положения и размера вашего градиентного поля в зависимости от размера экрана телефона. Ниже будет нарисован большой круг, который частично находится за пределами экрана. Вы можете настроить формулы для точной настройки.

Примечание: это сделает то, что вам нужно в портрете, в ландшафте все будет по-другому. Если вам нужно другое, либо узнайте, как создавать формулы, MediaQuery соответствующие ландшафту, либо ознакомьтесь с виджетом OrientationBuilder и используйте разные версии в портретной и альбомной ориентации.

 @override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: [
        Positioned(
            left: (MediaQuery.of(context).size.width -
                    MediaQuery.of(context).size.height) /
                2,
            top: -1 * MediaQuery.of(context).size.height / 2,
            child: Container(
              width: MediaQuery.of(context).size.height,
              height: MediaQuery.of(context).size.height,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                gradient: gradient,
              ),
            )),
        Center(
          child: Container(
            width: 195,
            height: 195,
            decoration: BoxDecoration(
              color: Colors.white,
              shape: BoxShape.circle,
            ),
            child: Image.asset(
                'assets/logo_new.png',
                 width: 200,
            ),
          ),
        )
      ],
    )
  );
}

1. спасибо за помощь! это работает, хотя выглядит немного по-другому, но я верю, что это не проблема.

2. Вы можете изменить размеры по ширине, сделать круг немного больше и т.д. Если вы сочтете мой ответ полезным, пожалуйста, проголосуйте / отметьте как принятый.

Ответ №2:

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

 Scaffold(
      body: Column(
        children: [
          Container(
            height: 550,
            child: Stack(
              alignment: AlignmentDirectional.bottomCenter,
              children: [
                Positioned( // <-- blue container
                  top: 0,
                  child: Container(
                    height: 450,
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                      gradient: new LinearGradient(
                          colors: [
                            const Color(0xFF3366FF),
                            const Color(0xFF00CCFF),
                          ],
                          begin: const FractionalOffset(0.0, 0.0),
                          end: const FractionalOffset(1.0, 0.0),
                          stops: [0.0, 1.0],
                          tileMode: TileMode.clamp),
                      borderRadius: BorderRadius.only(
                        bottomLeft: const Radius.circular(1500.0),
                        bottomRight: const Radius.circular(1500.0),
                      ),
                    ),
                  ),
                ),
                Positioned(//<-- image container
                  bottom: 0,
                  child: Container(
                    width: 200,
                    height: 200,
                    padding: EdgeInsets.all(20),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      shape: BoxShape.circle,
                    ),
                    child: Container(
                      width: 195,
                      height: 195,
                      decoration: BoxDecoration(
                        color: Colors.yellow,
                        shape: BoxShape.circle,
                      ),
                      child: Image.asset(
                        MyResources.cameraPng, //<-- image path
                        width: 200,
                      ),
                    ),
                  ),
                ),
                Positioned(// <-- text
                  top: 150,
                  child: Text(
                    'HELLO   !',
                    style: TextStyle(fontSize: 55, color: Colors.white),
                  ),
                ),
              ],
            ),
          ),
          Container( //<-- button is here
            width: 300,
            height: 50,
            color: Colors.red,
            child: Center(
              child: Text('your button',
                  style: TextStyle(fontSize: 20, color: Colors.white)),
            ),
          )
        ],
      ),
    );