Блог

Я хочу покрасить половину моего аватара в темно-синий цвет, а другую половину — в светло-голубой. Я имею в виду ровно половину. Как я могу этого добиться?

Точно так же, как они —

Я пробовал это, но это не сработало —

 Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Color(0xFF040663),
                Color(0xFF434599),
              ],
            ),
          ),
          child: CircleAvatar(
            backgroundColor: Colors.transparent,
            radius: MediaQuery.of(context).size.height*0.045,
            child: Icon(
              icon,
              size: size,
              color: Colors.white,
            ),
          ),
        ),
 

Может кто-нибудь сказать мне, как я могу отредактировать этот код или подсказать мне новый способ добиться этого?

Вы почти на месте. Вам нужно повторить цвет в градиенте и использовать свойство stops, чтобы получить резкий градиент.

 return Container(
      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Colors.purple,
            Colors.purple,
            Colors.blue,
          ],
          stops: [
            0, 0.5, 0.5
          ]
        ),
      ),
      child: Icon(
        Icons.camera,
        size: 32,
        color: Colors.white,
      ),
    );
 

Вот результат:

Для получения дополнительной информации обратитесь к документации по свойствам stops: https://api.flutter.dev/flutter/painting/Gradient/stops.html