Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
)
]
);
}
}
@graphicbeacon

This comment has been minimized.

Copy link
Owner Author

@graphicbeacon graphicbeacon commented Feb 21, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.