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