Circle around number

user_1406239 0
Viewed 263

I'd like to draw a circle around a number on top of an image. So the inside of the circle is transparent and the border of the circle is white. Alas, the double CircleAvatar trick to have a CircleAvatar's border doesn't work for transparent background. An example can be found here https://drive.google.com/file/d/1QFIH9ty8cajoLlI9-Vv3q4mOscRLRvAf/view

 Stack(
                        children: <Widget>[
                        Image.network(
                            this.widget.rando.etapes[index].couvertureUrl,
                            width: 90.0,
                            height: 90.0,
                        fit:BoxFit.cover),
                          Container(
                            width: 90.0,

                            alignment: Alignment.center,
                            child: Container(
                              child:CircleAvatar(
                                backgroundColor: Colors.transparent,
                                radius: 30,
                              child: Text((index+1).toString(),
                              style:TextStyle(color: Colors.white,
                              fontSize: 25.0,
                              fontWeight: FontWeight.w600)),
                            ),
                          ),
                          )
                      ]
                      ),
dart flutter
1 Answers

You can do it by using 'Container' and decoration parameter instead of 'CircleAvatar'.

Here is a my test code.

enter image description here

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildBody(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _buildBody() {
    return Container(
      height: 190,
      width: 190,
      child: Stack(
        children: <Widget>[
          Image.network(
              'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80',
              width: 190.0,
              height: 190.0,
              fit: BoxFit.cover),
          Center(
            child: Container(
              width: 90.0,
              height: 90.0,
              decoration: BoxDecoration(
                color: Colors.transparent,
                shape: BoxShape.circle,
                border: Border.all(
                  color: Colors.white,
                  width: 5.0,
                  style: BorderStyle.solid,
                ),
              ),
              child: Center(
                child: Text(
                  '1',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 25.0,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
user_119864500
Related