Solution code on "Flutter for React developers" YouTube tutorial

main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'dart:math' as math;
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyAppPage(title: 'Flutter Demo')
    );
  }
}

class MyAppPage extends StatefulWidget {
  MyAppPage({this.title});
  
  final String title;
  
  @override
  _MyAppPageState createState() => _MyAppPageState();
}

class _MyAppPageState extends State<MyAppPage> {
  MainAxisAlignment _mainAxisAlignment;
  CrossAxisAlignment _crossAxisAlignment;
  
  final _mainAxisAlignments = [
    MainAxisAlignment.center,
    MainAxisAlignment.end,
    MainAxisAlignment.spaceAround,
    MainAxisAlignment.spaceBetween,
    MainAxisAlignment.start,
  ];
  
  final _crossAxisAlignments = [
    CrossAxisAlignment.center,
    CrossAxisAlignment.end,
    CrossAxisAlignment.start,
    CrossAxisAlignment.stretch,
  ];
  
  @override
  void initState() {
    _mainAxisAlignment = MainAxisAlignment.start;
    _crossAxisAlignment = CrossAxisAlignment.center;
    
    super.initState();
  }
  
  void _setAxisAlignment() {
    var randNum = math.Random();
    var randCrossAxisIndex = math.Random();
    setState(() {
      _mainAxisAlignment = _mainAxisAlignments[randNum.nextInt(_mainAxisAlignments.length)];
      _crossAxisAlignment = _crossAxisAlignments[
        randCrossAxisIndex.nextInt(_crossAxisAlignments.length)];
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title)
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: _crossAxisAlignment,
            children: <Widget>[
              Text(widget.title, style: TextStyle(
                fontSize: 30,
                color: Colors.purple,
                decoration: TextDecoration.underline
              )),
              SizedBox(height: 30),
              SquareRows(
                mainAxisAlignment: _mainAxisAlignment
              ),
              SizedBox(height: 30),
              Stack(
                overflow: Overflow.visible,
                children: <Widget>[
                  Container(
                    height: 200,
                    width: 200,
                    decoration: BoxDecoration(
                      color: Colors.indigo,
                    )
                  ),
                  Padding(
                    padding: EdgeInsets.only(left: 20, top: 40),
                    child: Text('Flutter rocks!', 
                                style: TextStyle(fontSize: 30, color: Colors.white))
                  ),
                  PositionedCircleAvatar()
                ]
              )
            ]
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.refresh),
          onPressed: _setAxisAlignment,
        )
      );
  }
}

class PositionedCircleAvatar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: -90,
      child: Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          color: Colors.black12,
          borderRadius: BorderRadius.circular(50)
        ),
//         child: Image.network(
//           'https://picsum.photos/id/103/100/100',
//           width: 100,
//           height: 100
//         )
        child: Align(
          alignment: Alignment.center,
          child: CircleAvatar(
            backgroundImage: NetworkImage('https://picsum.photos/id/237/100/100'),
            radius: 45,
            child: Center(
              child: Text('J', style: TextStyle(
                fontSize: 40,
                color: Colors.white
              ))
            )
          )
        )
      )
    );
  }
}

class SquareRows extends StatelessWidget {
  SquareRows({this.mainAxisAlignment});
  
  final MainAxisAlignment mainAxisAlignment;
  
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: mainAxisAlignment,
      children: <Widget>[
        Container(
          width: 50,
          height: 50,
          color: Colors.red
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.yellow
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.blue
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.green
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.brown
        )
      ]
    );
  }
}

Try this solution here: https://dartpad.dev/d12015d0e7394f6de0567eb7489db258