Introduction View

column_text_reverse.dart

import 'package:flutter/material.dart';

import 'subtitle.dart';

class BoldSoftColumntText extends StatelessWidget {
  final String title;
  final String description;

  const BoldSoftColumntText({Key key, this.title, this.description})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Wrap(
      direction: Axis.vertical,
      spacing: 10,
      children: [
        SubTitleText(
          title,
          color: Colors.grey,
        ),
        Text(description)
      ],
    );
  }
}

empty_space.dart

import 'package:flutter/material.dart';
import 'package:healthoui/ui/shared/widget/padding/base_padding_enum.dart';

class EmptySpace extends StatelessWidget {
  final BasePaddingLevel level;
  final bool isWidth;
  const EmptySpace({Key key, this.level, this.isWidth = false})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: isWidth ? 0 : spaceValue(context),
      width: !isWidth ? 0 : spaceValue(context),
    );
  }

  double spaceValue(BuildContext context) {
    final value = MediaQuery.of(context).size.aspectRatio;
    switch (level) {
      case BasePaddingLevel.HIGH:
        return value * 100;
      case BasePaddingLevel.MIDDLE:
        return value * 50;
      case BasePaddingLevel.LOW:
        return value * 20;
      case BasePaddingLevel.VERY_LOW:
        return value * 10;
      default:
        return value;
    }
  }
}

introduction_view.dart

import 'package:flutter/material.dart';

import './introduction_view_model.dart';
import '../../../../shared/ui_helper.dart';
import '../../../../shared/widget/padding/base_padding_enum.dart';
import '../../../../shared/widget/space/empty_space.dart';
import '../../../../shared/widget/text/subtitle.dart';

class IntroductionView extends IntroductionViewModel {
  @override
  Widget build(BuildContext context) {
    // Replace this with your build function
    return Scaffold(
      appBar: UIHelper.appBar("Introduction"),
      body: Padding(
        padding: EdgeInsets.all(SpaceValue.LOW),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(completeText),
            space,
            Text("Dscription"),
            space,
            SubTitleText(
              description,
              size: FontSizeValue.LOW,
            ),
            space,
            ...items()
          ],
        ),
      ),
    );
  }

  Widget get space => EmptySpace(
        level: BasePaddingLevel.MIDDLE,
      );
}

introduction_view_model.dart

import 'package:flutter/material.dart';
import 'package:healthoui/ui/shared/widget/text/column_text_reverse.dart';
import './introduction.dart';

abstract class IntroductionViewModel extends State<Introduction> {
  // Add your state and logic here
  final String completeText = "Complete the Beginner Program";
  final String description = "This is a beginner quick start guide that will"
      "move you from day 1 to day 60, providing"
      "you with starting training and instructions...";

  List<Widget> items() {
    return [
      BoldSoftColumntText(
        title: "Duration",
        description: "5 Weeks",
      ),
      BoldSoftColumntText(
        title: "Goal",
        description: "5 Weeks",
      ),
      BoldSoftColumntText(
        title: "Training Level",
        description: "5 Weeks",
      ),
      BoldSoftColumntText(
        title: "Days per Week",
        description: "5 Weeks",
      ),
      BoldSoftColumntText(
        title: "Target Gender",
        description: "5 Weeks",
      ),
    ];
  }
}