CS 492 Week 6 Exploration 1 Exercise

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(body: Exercise())
    );
  }
}

class Exercise extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
        heightFactor: 0.8,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              color: Colors.pink,
              width: MediaQuery.of(context).size.width * 0.25
            ),
            Expanded(flex: 4, child: Container()),
            Expanded(child: Container(color: Colors.blue)),
          ]
        )
      );      
  }
}

solution.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(body: Exercise())
    );
  }
}

class Exercise extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: FractionallySizedBox(
          heightFactor: 0.6,
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: padding(context)),
            child:Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(child: Container(color: Colors.red)),
                Expanded(child: Container()),
                Expanded(child: Container(color: Colors.green)),
              ]
            )
          )
        )
      );      
  }
  
  double padding(BuildContext context) {
    return MediaQuery.of(context).size.width * 0.1;
  }
}