Skip to content

Instantly share code, notes, and snippets.

@bluetoothfx

bluetoothfx/flutter - matrix position with column and more

Last active June 12, 2020 02:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bluetoothfx/7413cb016d84b6caa45998f60bbe0fb7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bluetoothfx/7413cb016d84b6caa45998f60bbe0fb7 to your computer and use it in GitHub Desktop.
Download ZIP
Basic Flutter widget implementation
Raw
flutter - matrix position with column and more
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var stars = Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.star, color: Colors.green[500]),
Icon(Icons.star, color: Colors.green[500]),
Icon(Icons.star, color: Colors.green[500]),
Icon(Icons.star, color: Colors.black),
Icon(Icons.star, color: Colors.black),
],
);
var ratingBox = Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
stars,
Text(
'170 Reviews',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontFamily: 'Roboto',
letterSpacing: 0.5,
fontSize: 20,
),
),
],
);
var chip = Row(
children: <Widget>[
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.grey.shade800,
child: Text('AB'),
),
label: Text('Aaron Burr'),
)
],
);
var icons = Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
chip,
Icon(
Icons.favorite,
color: Colors.pink,
size: 24.0,
semanticLabel: 'Text to announce in accessibility modes',
),
Icon(
Icons.audiotrack,
color: Colors.green,
size: 30.0,
),
Icon(
Icons.beach_access,
color: Colors.blue,
size: 36.0,
),
],
);
final ratings = Container(
padding: EdgeInsets.all(50),
child: Column(
children: <Widget>[ratingBox, icons],
),
);
////////////////////////////////
final descTextStyle = TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontFamily: 'Roboto',
letterSpacing: 0.5,
fontSize: 18,
height: 2,
);
// DefaultTextStyle.merge() allows you to create a default text
// style that is inherited by its child and all subsequent children.
final iconList = DefaultTextStyle.merge(
style: descTextStyle,
child: Container(
padding: EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Icon(Icons.kitchen, color: Colors.green[500]),
Text('PREP:'),
Text('25 min'),
],
),
Column(
children: [
Icon(Icons.timer, color: Colors.green[500]),
Text('COOK:'),
Text('1 hr'),
],
),
Column(
children: [
Icon(Icons.restaurant, color: Colors.green[500]),
Text('FEEDS:'),
Text('4-6'),
],
),
],
),
),
);
var label = Row(
children: <Widget>[Text('Simple matrix (Row Column)')],
);
//rc
var cols = Container(
padding: EdgeInsets.all(50),
//color: Colors.teal,
child: Row(
children: <Widget>[
Column(
children: <Widget>[
Text('This is 11'),
Text('This is 21'),
Text('This is 31')
],
),
SizedBox(
width: 10.0,
),
Column(
children: <Widget>[
Text('This is 12'),
Text('This is 22'),
Text('This is 32'),
],
),
SizedBox(width: 10.0),
Column(
children: <Widget>[
Text('This is 13'),
Text('This is 23'),
Text('This is 33')
],
)
],
),
);
return MaterialApp(
home: Scaffold(
body: cols,
),
);
}
}
Raw
flutter widget - Column
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Container(
child: Column(
children: <Widget>[
Container(
color: Colors.red,
height: 100,
width: double.infinity,
),
Container(
color: Colors.blue,
height: 100,
width: double.infinity,
),
Container(
color: Colors.green,
height: 100,
width: double.infinity,
),
Container(
color: Colors.yellow,
height: 100,
width: double.infinity,
)
],
),
),
),
),
);
}
}
Raw
flutter widget - Row
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
Row(
//ROW 1
children: [
Container(
color: Colors.red,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.blue,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.green,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
],
),
Row(
//ROW 2
children: [
Container(
color: Colors.orange,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.greenAccent,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
],
)
],
),
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment