Руководство Flutter CircleAvatar

CircleAvatar
child
backgroundColor
backgroundImage
foregroundColor
radius
minRadius
maxRadius
onBackgroundImageError

1. CircleAvatar

CircleAvatar - это просто круг, где мы можем добавить цвет фона, фоновое изображение или просто какой-то текст. Он обычно представляет пользователя с его изображением или с его инициалами. Хотя мы можем сделать подобный виджет с нуля, этот виджет пригодится при быстрой разработке приложения.

CircleAvatar Constructor

const CircleAvatar(
    {Key key,
    Widget child,
    Color backgroundColor,
    ImageProvider<Object> backgroundImage,
    void onBackgroundImageError(
        dynamic exception,
        StackTrace stackTrace
    ),
    Color foregroundColor,
    double radius,
    double minRadius,
    double maxRadius}
)

Давайте начнем с простого CircleAvatar, состоящего из заданного фонового изображения и цвета фона по умолчанию.

(ex1)

CircleAvatar(
  radius: 100,
  backgroundImage: NetworkImage("https://s3.o7planning.com/images/boy-128.png"),
)

В основном, CircleAvatar не предоставляет свойство для установки границы, однако вы можете обернуть его в другой CircleAvatar с большим радиусом и другим цветом фона, чтобы создать что-то похожее на границу.

(ex2)

CircleAvatar(
    radius: 110,
    backgroundColor: Color(0xffFDCF09),
    child: CircleAvatar(
      radius: 100,
      backgroundImage: NetworkImage("https://s3.o7planning.com/images/boy-128.png"),
    )
)

Например: CircleAvatar с инициалами пользователя (user's initials).

(ex3)

CircleAvatar(
  radius: 110,
  backgroundColor: Colors.greenAccent[400],
  child: Text(
    'TVH',
    style: TextStyle(
        fontSize: 90,
        color: Colors.white
    ),
  ),  
)

2. child

Widget child

3. backgroundColor

backgroundColor - Цвет фона CircleAvatar.

Значение backgroundColor по умолчанию - ThemeData.primaryColorLight, если ForegroundColor (цвет текста)темный, и является ThemeData.primaryColorDark, если ForegroundColor светлый.

Color backgroundColor

Например:

backgroundColor (ex1)

CircleAvatar(
  radius: 110,
  backgroundImage: NetworkImage("https://s3.o7planning.com/images/boy-128.png"),
  backgroundColor: Colors.cyan[100],
)

4. backgroundImage

backgroundImage - Фоновое изображение CircleAvatar, которое является аватаром пользователя.

Если вы хотите отобразить инициалы пользователя (user's initials) на CircleAvatar, используйте свойство child.

ImageProvider<Object> backgroundImage

Руководство Flutter ImageProvider

backgroundImage (ex1)

CircleAvatar(
  radius: 110,
  backgroundImage: NetworkImage("https://s3.o7planning.com/images/boy-128.png"),
)

5. foregroundColor

foregroundColor - Цвет текста по умолчанию в CircleAvatar.

Значение ForegroundColor по умолчанию - ThemeData.primaryColorLight, если backgroundColor (цвет фона) темный, и ThemeData.primaryColorDark, если backgroundColor светлый.

Color foregroundColor

Например:

foregroundColor (ex1)

CircleAvatar(
  radius: 110,
  foregroundColor: Colors.red,
  child: Text(
    'TVH',
    style: TextStyle(
        fontSize: 90
    ),
  ),
)

6. radius

radius - Радиус окружности CircleAvatar.

Если radius указан, то minRadius и maxRadius не могут быть указаны. Указание radius также эквивалентно указанию значений для minRadius и maxRadius, все они имеют одно и то же значение.

double radius

7. minRadius

minRadius - Минимальный радиус CircleAvatar.

Если minRadius указан, то radius не будет указан. Flutter автоматически вычислит подходящий размер для CircleAvatar на основе доступного пространства.

double minRadius

8. maxRadius

maxRadius - Максимальный радиус CircleAvatar.

Если maxRadius указан, то radius не будет указан. Flutter автоматически вычислит подходящий размер для CircleAvatar на основе доступного пространства.

double maxRadius

9. onBackgroundImageError

onBackgroundImageError - опциональная функция callback - вызывается, когда произошла ошибка загрузки изображения с backgroundImage.

void onBackgroundImageError(
    dynamic exception,
    StackTrace stackTrace
)

Например: CircleAvatar пытается отобразить аватар пользователя, если во время загрузки изображения возникнет ошибка, он отобразит текст ошибки.

onBackgroundImageError (ex1)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
      return _MyHomePageState();
  }

}

class _MyHomePageState extends State<MyHomePage> {

  // String imageUrl = "https://s3.o7planning.com/images/boy-128.png";
  String imageUrl = "https://file-not-found";
  bool _loadImageError = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("Flutter CircleAvatar Example")
        ),
        body: Center (
            child: CircleAvatar(
              radius: 100,
              backgroundImage: this._loadImageError? null: NetworkImage(this.imageUrl),
              onBackgroundImageError: this._loadImageError? null:
                       (dynamic exception, StackTrace stackTrace) {
                  print("Error loading image! " + exception.toString());
                  this.setState(() {
                      this._loadImageError = true;
                  });
              },
              child: this._loadImageError? Text("Error loading image!") : null
            )
        )
    );
  }
}