CODEWITHSUNDEEP
flutterflutter-layout
Luís Campos
Luís Campos

Reputation: 11

How to overlap two circles?

Can someone help me get this layout with the first circle over the second? image

I have this function:

Widget overlapped() {
  final overlap = 25;
  final items = [
    Container(
      padding: EdgeInsets.only(right: 2),
      decoration: new BoxDecoration(
        color: Colors.blue,
        shape: BoxShape.circle,
      ),
      child: CircleAvatar(
        radius: 22,
        backgroundImage: AssetImage('assets/example_logo.png'),
        backgroundColor: Colors.black,
      ),
    ),
    CircleAvatar(
        radius: 22,
        backgroundColor: Colors.white,
        child: ClipOval(
            child: Image.network(
          "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1200px-Google_%22G%22_Logo.svg.png",
          errorBuilder: (context, exception, stackTrace) {
            return Container(color: Colors.white);
          },
          height: 35,
        ))),
    CircleAvatar(
        child: Text('+2', style: TextStyle(color: Colors.white)),
        backgroundColor: Theme.of(context).canvasColor),
  ];

  List<Widget> stackLayers = List<Widget>.generate(items.length, (index) {
    return Container(
      padding: EdgeInsets.fromLTRB(index.toDouble() * overlap, 0, 0, 0),
      child: items[index],
    );
  });

  return Stack(children: stackLayers);
}

This function whenever I add an item to the array, it adds a widget on the right. But I want the first to be above the second, the second of the third, etc ...

Upvotes: 0

Views: 1405

Answers (2)

Maruf Hassan
Maruf Hassan

Reputation: 1238

Use Stack and Positioned together.

import 'package:flutter/material.dart';

class OverLap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Overlap'),
      ),
      body: Container(
        padding: const EdgeInsets.all(8.0),
        width: 500.0,
        child: Stack(
          children: <Widget>[
            //Change according to your icon
            Icon(
              Icons.flaky,
              size: 50.0,
              color: Colors.red,
            ),
            Positioned(
              left: 20.0,
              //Change according to your icon
              child: Icon(
                Icons.flaky,
                size: 50.0,
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 1

victwise
victwise

Reputation: 806

you could use the Stack widget :

        Stack(
         children:<Widget>:[
Positioned(
           right: 130.0, 
          child:Container(
        shape: BoxShape.circle,
          
     )
    ),
          Positioned(
           left: 130.0, 
          child:Container(
        shape: BoxShape.circle,
          
     )
    ),
    
        ]
        )

Upvotes: 2

Related Questions