Solution code on "Flutter for React developers" YouTube tutorial
// 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 | |
) | |
] | |
); | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Try this solution here: https://dartpad.dev/d12015d0e7394f6de0567eb7489db258