如何在Flutter中创建带有圆角的正方形头像？

Question

我想创建一个类似于CircleAvatar的widget，但是不是圆形的。 这是CircleAvatar：

这是我想创建的头像：

我想知道是否有默认的widget可以做到这一点，就像CircularAvatar用于创建圆形头像一样。

- dam034

Answer 1

有很多方法可以实现，但我只会使用一种。 在child小部件周围包装一个ClipRRect()小部件（这可以是图像或任何其他相关的小部件，例如在我的示例中使用的容器）。然后，将BorderRadius.circular(20.0)值传递给ClipRRect()的borderRadius属性。这是创建效果的活动代码行。 请查看下面的示例：

ClipRRect(
  borderRadius: BorderRadius.circular(20.0),//or 15.0
  child: Container(
    height: 70.0,
    width: 70.0,
    color: Color(0xffFF0E58),
    child: Icon(Icons.volume_up, color: Colors.white, size: 50.0),
  ),
),

点击此处查看结果

- Ridwan Abubakar

---

虽然这对你来说可能是“显而易见的”，但添加一些解释可以帮助提问者和未来用户，同时也会提高你的回答质量。 - Christopher Moore

Answer 2

你可以像这样使用指定的BorderRadius属性和ClipRRect：

在这里查看图片

 ClipRRect(
   borderRadius: BorderRadius.all(Radius.circular(10.0)),//add border radius here
   child: Image.asset('assets/01.jpg'),//add image location here
 ),

- littleironical

Answer 3

您可以使用ClipRRect和Container Widget的组合来实现相同的效果，使用上述给出的代码即可。

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
  borderRadius: BorderRadius.circular(15.0),//or 15.0
  child: Container(
    height: 70.0,
    width: 70.0,
    color: const Color(0xffFF0E58),
    child: const Icon(Icons.volume_up, color: Colors.white, size: 50.0),
  ),
);
  }
}

- IonicFireBaseApp