Die Anleitung zu Flutter CircleAvatar

CircleAvatar
child
backgroundColor
backgroundImage
foregroundColor
radius
minRadius
maxRadius
onBackgroundImageError

1. CircleAvatar

CircleAvatar ist einfach ein Kreis, in dem wir eine Hintergrundfarbe, ein Hintergrundbild oder einen Text hinzufügen können. Es stellt oft den Benutzer mit seinem Bild oder durch seine Abkürzungsname. Obwohl wir von Anfang an ein ähnliches Widget erstellen können, ist dieses Widget sehr nützlich, um eine Anwendung schnell zu entwickeln.

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}
)

Beginnen wir mit einem einfachen CircleAvatar, einschließend einen bestimmten Hintergrund und Defaulthintergrundsfarbe.

(ex1)

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

Im Grunde bietet CircleAvatar keine Property um die Rahmen festzulegen. Allerdings können Sie ihn in einen anderen CircleAvatar mit einem größeren Radius und einer anderen Hintergrundfarbe einwickeln, um etwas Ähnliches wie den Rand zu erstellen.

(ex2)

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

Z.B: Ein CircleAvatar mit der Initialen des Benutzers (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 - Die Hintergrundfarbe von CircleAvatar.

Die Standardwert von backgroundColor ist ThemeData.primaryColorLight wenn foregroundColor (Schriftfarbe) dunkel ist, Und sie ist ThemeData.primaryColorDark wenn foregroundColor hell ist.

Color backgroundColor

zum Beispiel:

backgroundColor (ex1)

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

4. backgroundImage

backgroundImage - Die Hintergrundfarbe von CircleAvatar, die die Avatar des Benutzer ist.

Wenn Sie die Initialen des Benutzer (user's initials) in CircleAvatar anzeigen möchten, verwenden Sie die Property child.

ImageProvider<Object> backgroundImage

Die Anleitung zu Flutter ImageProvider

backgroundImage (ex1)

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

5. foregroundColor

foregroundColor - Die Standardfarbe der Text in CircleAvatar.

Die Standardwert von foregroundColor ist ThemeData.primaryColorLight wenn backgroundColor (die Hintergrundfarbe) dunkel ist. Und sie ist ThemeData.primaryColorDark wenn backgroundColor hell ist.

Color foregroundColor

Zum Beispiel:

foregroundColor (ex1)

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

6. radius

radius - Die Radius der Kreis CircleAvatar.

Wenn radius angegeben ist, können minRadius und maxRadius nicht angegeben werden. Die Angabe eines radius entspricht auch der bestimmten Wert von minRadius und maxRadius. Alle Werte haben denselben Wert.

double radius

7. minRadius

minRadius - die minimale Radius von CircleAvatar.

Wenn minRadius angegeben ist, wird der radius nicht angegeben. Flutter berechnet automatisch die entsprechende Größe für den CircleAvatar basierend auf dem vorhandenen Speicherplatz.

double minRadius

8. maxRadius

maxRadius - die maximale Radius von CircleAvatar.

Wenn maxRadius angegeben ist, wird der radius nicht angegeben. Flutter berechnet automatisch die entsprechende Größe für den CircleAvatar basierend auf dem vorhandenen Speicherplatz.

double maxRadius

9. onBackgroundImageError

onBackgroundImageError - Eine optionale Funktion callback , wird aufgeruft wenn ein Fehler beim Bildladen für backgroundImage auftritt.

void onBackgroundImageError(
    dynamic exception,
    StackTrace stackTrace
)

Z.B: Ein CircleAvatar versucht, den Avatar eines Benutzers anzuzeigen. Wenn beim Laden des Bildes ein Fehler auftritt, wird ein Fehlertext angezeigt.

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
            )
        )
    );
  }
}