betacode

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

View more Tutorials:

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
  • TODO Link?
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
            )
        )
    );
  }
}

View more Tutorials:

Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.