Balance Diets

main.dart

// 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 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<Map<String, dynamic>> balanceDiets = [
      {
        'title': 'Fat',
        'value': 102,
        'unit': 'g',
        'color': Colors.orange,
      },
      {
        'title': 'Carbs',
        'value': 16,
        'unit': 'g',
        'color': Colors.green,
      },
      {
        'title': 'Protein',
        'value': 50,
        'unit': 'g',
        'color': Colors.blue,
      },
      {
        'title': 'Fibers',
        'value': 40,
        'unit': 'g',
        'color': Colors.pink,
      },
    ];

    final totalBalanceDiet =
        balanceDiets.fold(0, (sum, diet) => (sum as int) + diet['value']);

    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Row(
            children: [
              for (final diet in balanceDiets) ...[
                Container(
                  width: 60,
                  height: 60,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(50),
                    color: diet['color'],
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        '${diet['value']}',
                      ),
                      Text(
                        '${diet['title']}',
                      ),
                      Text(
                        '${diet['unit']}',
                      ),
                    ],
                  ),
                ),
               const SizedBox(width: 15),
              ]
            ],
          ),
          const SizedBox(height: 10),
          SizedBox(
            width: MediaQuery.of(context).size.width,
            height: 10,
            child: Stack(
              children: [
                for (final diet in balanceDiets)
                  Positioned(
                    left: (diet['value'] / totalBalanceDiet) * totalBalanceDiet,
                    top: 0,
                    bottom: 0,
                    child: Container(
                      width: (diet['value'] / totalBalanceDiet) *
                          MediaQuery.of(context).size.width,
                      height: 10,
                      color: diet['color'],
                    ),
                  ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}