Lesson 04

1. Ссылка к - https://pub.dev/packages/google_fonts

// Some code
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class Lesson04 extends StatefulWidget {
  const Lesson04({super.key});

  @override
  State<Lesson04> createState() => _Lesson04State();
}

class _Lesson04State extends State<Lesson04> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,

      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.only(top: 24, right: 24, left: 24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Image.asset('assets/logo.png'),

              SizedBox(height: 32),

              Text(
                'Sign in to your\nAccount',
                style: GoogleFonts.inter(
                  textStyle: TextStyle(
                    fontSize: 32,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),

              SizedBox(height: 12,),

              Text(
                'Enter your email and password to log in ',
                style: GoogleFonts.inter(
                  textStyle: TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.w500,
                    color: Color(0xFF6C7278),
                  ),
                ),
              ),

              SizedBox(height: 32,),

              Text('Email', style: GoogleFonts.plusJakartaSans(
                textStyle: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w500,
                  color: Color(0xFF6C7278),
                )
              ),),

              TextField(
                style: TextStyle(
                  fontSize: 14, fontWeight: FontWeight.w600,
                  color: Color(0xFF1A1C1E)
                ),
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.symmetric(
                    horizontal: 14,
                    vertical: 12.5
                  ),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                    borderSide: BorderSide(
                      color: Color(0xFF1D61E7),
                    )
                  ),
                  enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10),
                      borderSide: BorderSide(
                          color: Color(0xFFEDF1F3)
                      )
                  ),


                ),
              ),

              SizedBox(height: 16,),

              Text('Password', style: GoogleFonts.plusJakartaSans(
                  textStyle: TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.w500,
                    color: Color(0xFF6C7278),
                  )
              ),),

              


            ],
          ),
        ),
      ),
    );
  }
}

// Some code
class Lesson04a extends StatefulWidget {
  const Lesson04a({super.key});

  @override
  State<Lesson04a> createState() => _Lesson04aState();
}

class _Lesson04aState extends State<Lesson04a> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,

            colors: [Color(0xFF2567E8), Color(0xFF1CE6DA)],
          ),
        ),
        child: Container(
          height: double.infinity,
          width: double.infinity,
          margin: EdgeInsets.symmetric(horizontal: 16, vertical: 70),
          padding: EdgeInsets.all(24),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            color: Colors.white,
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _iconButton(),
              SizedBox(height: 24),
              _textSignUp(),
              SizedBox(height: 12),
              _login(),
              SizedBox(height: 24),
              _textFieldWidget('Full name'),
              _textFieldWidget('Email'),
              _textFieldWidget('Birth of date'),
              _textFieldWidget('Phone number'),
              SizedBox(height: 24),
              _button(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _iconButton() {
    return IconButton(onPressed: () {}, icon: Icon(Icons.arrow_back));
  }

  Widget _textSignUp() {
    return Text(
      'Sign up',
      style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
    );
  }

  Widget _login() {
    return Row(
      children: [
        _name('Already have an account?'),
        TextButton(
          onPressed: () {},
          child: Text(
            'Login',
            style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.w500,
              color: Color(0xFF4D81E7),
            ),
          ),
        ),
      ],
    );
  }

  Widget _name(String title) {
    return Text(
      title,
      style: TextStyle(
        fontSize: 12,
        fontWeight: FontWeight.w500,
        color: Color(0xFF6C7278),
      ),
    );
  }

  Widget _textFieldWidget(String title) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          title,
          style: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w500,
            color: Color(0xFF6C7278),
          ),
        ),
        SizedBox(height: 2),
        TextField(
          // obscureText: true,
          // obscuringCharacter: '\$',
          maxLines: 1,
          maxLength: 5,
          decoration: InputDecoration(
            contentPadding: EdgeInsets.symmetric(
              horizontal: 14,
              vertical: 12.5,
            ),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10),
              borderSide: BorderSide(color: Color(0xFFEDF1F3)),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10),
              borderSide: BorderSide(color: Color(0xFF1D61E7)),
            ),
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10),
              borderSide: BorderSide(color: Color(0xFFEDF1F3)),
            ),

            suffixText: 'Hello',
            hintText: 'Озун жонундо 300 симбол',
            helperText: 'Help',
            //errorText: 'Атынды объязательно жаз',
            labelText: 'Name',
            prefixIcon: Icon(Icons.add),
            // suffixIcon: IconButton(onPressed: (){}, icon: Icon(Icons.remove_red_eye_sharp))
          ),
        ),
        SizedBox(height: 16),
      ],
    );
  }

  Widget _button() {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          showDialog(context: context, builder: (context){
            return AlertDialog(
              title: Text('Hello'),
              content: Container(
                height: 200,
                width: 400,
                color: Colors.white,
              ),
              actions: [
                TextButton(onPressed: (){}, child: Text('Ok'))
              ],
            );
          });
        },

        style: ElevatedButton.styleFrom(
          backgroundColor: Color(0xFF1D61E7),
          minimumSize: Size(295, 48),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
        ),
        child: Text(
          'Register',
          style: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w500,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

// Some code
class Lesson04a extends StatefulWidget {
  const Lesson04a({super.key});

  @override
  State<Lesson04a> createState() => _Lesson04aState();
}

class _Lesson04aState extends State<Lesson04a> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,

            colors: [Color(0xFF2567E8), Color(0xFF1CE6DA)],
          ),
        ),
        child: Container(
          height: double.infinity,
          width: double.infinity,
          margin: EdgeInsets.symmetric(horizontal: 16, vertical: 70),
          padding: EdgeInsets.all(24),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            color: Colors.white,
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _iconButton(),
              SizedBox(height: 24),
              _textSignUp(),
              SizedBox(height: 12),
              _login(),
              SizedBox(height: 24),
              _textFieldWidget('Full name'),
              _textFieldWidget('Email'),
              _textFieldWidget('Birth of date'),
              _textFieldWidget('Phone number'),
              SizedBox(height: 24),
              _button(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _iconButton() {
    return IconButton(onPressed: () {}, icon: Icon(Icons.arrow_back));
  }

  Widget _textSignUp() {
    return Text(
      'Sign up',
      style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
    );
  }

  Widget _login() {
    return Row(
      children: [
        _name('Already have an account?'),
        TextButton(
          onPressed: () {},
          child: Text(
            'Login',
            style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.w500,
              color: Color(0xFF4D81E7),
            ),
          ),
        ),
      ],
    );
  }

  Widget _name(String title) {
    return Text(
      title,
      style: TextStyle(
        fontSize: 12,
        fontWeight: FontWeight.w500,
        color: Color(0xFF6C7278),
      ),
    );
  }

  Widget _textFieldWidget(String title) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          title,
          style: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w500,
            color: Color(0xFF6C7278),
          ),
        ),
        SizedBox(height: 2),
        TextField(
          // obscureText: true,
          // obscuringCharacter: '\$',
          maxLines: 1,
          maxLength: 5,
          decoration: InputDecoration(
            contentPadding: EdgeInsets.symmetric(
              horizontal: 14,
              vertical: 12.5,
            ),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10),
              borderSide: BorderSide(color: Color(0xFFEDF1F3)),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10),
              borderSide: BorderSide(color: Color(0xFF1D61E7)),
            ),
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10),
              borderSide: BorderSide(color: Color(0xFFEDF1F3)),
            ),

            suffixText: 'Hello',
            hintText: 'Озун жонундо 300 симбол',
            helperText: 'Help',
            //errorText: 'Атынды объязательно жаз',
            labelText: 'Name',
            prefixIcon: Icon(Icons.add),
            // suffixIcon: IconButton(onPressed: (){}, icon: Icon(Icons.remove_red_eye_sharp))
          ),
        ),
        SizedBox(height: 16),
      ],
    );
  }

  Widget _button() {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                title: Text('Hello'),
                content: Container(
                  height: 200,
                  width: 400,
                  color: Colors.white,
                ),
                actions: [TextButton(onPressed: () {}, child: Text('Ok'))],
              );
            },
          );
        },

        style: ElevatedButton.styleFrom(
          backgroundColor: Color(0xFF1D61E7),
          minimumSize: Size(295, 48),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
        ),
        child: Text(
          'Register',
          style: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w500,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

class Lesson04practise extends StatefulWidget {
  const Lesson04practise({super.key});

  @override
  State<Lesson04practise> createState() => _Lesson04practiseState();
}

class _Lesson04practiseState extends State<Lesson04practise> {
  // String selectedCountry = "🇰🇬";
  //
  // final Map<String, String> countryFlags = {
  //   "KG": "🇰🇬",
  //   "KZ": "🇰🇿",
  //   "RU": "🇷🇺",
  //   "US": "🇺🇸",
  // };
  //
  // final Map<String, String> dialCodes = {
  //   "KG": "+996",
  //   "KZ": "+7",
  //   "RU": "+7",
  //   "US": "+1",
  // };

  bool obscureText = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 20),
        child: TextField(
          obscureText: obscureText,
          decoration: InputDecoration(
            border: OutlineInputBorder(),

            prefixIcon: Icon(Icons.eighteen_mp),
            suffixIcon: IconButton(
              onPressed: () {
                setState(() {
                  obscureText = !obscureText;
                });
              },
              icon: Icon(Icons.remove_red_eye_sharp),
            ),
          ),
        ),
      ),
    );
  }
}

class Lesson04b extends StatelessWidget {
  const Lesson04b({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        leading: _button(Icons.arrow_back),
        title: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,

          children: [Text('Header Label'), Text('Loremp text')],
        ),
        centerTitle: true,

        actions: [_button(Icons.more_vert)],
      ),

      body: Column(
        children: [
          _containerWidget(Colors.orange),
          _containerWidget(Colors.green),

          _textWidget('Hello'),
          _textWidget('Welcome'),
          _textWidget('text'),
        ],
      ),
    );
  }

  // Color, String, int -1,2 3 double - 1.0, 2.454645, IconData

  Widget _textWidget(String text) {
    return Text(
      text,
      style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.w700,
        color: Colors.green,
      ),
    );
  }

  Widget _containerWidget(Color color) {
    return Container(height: 100, width: 100, color: color);
  }

  Widget _button(IconData icon) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: CircleAvatar(
        child: IconButton(onPressed: () {}, icon: Icon(icon)),
      ),
    );
  }
}

class Lesson04c extends StatelessWidget {
  const Lesson04c({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFF5CB58),
      appBar: AppBar(
        backgroundColor: Color(0xFFF5CB58),
        leading: IconButton(
          onPressed: () {},
          icon: Image.asset('assets/edit.png'),
        ),
        title: Text('Filter'),
        centerTitle: true,
        actions: [
          CircleAvatar(
            backgroundColor: Colors.white,
            child: IconButton(
              onPressed: () {},
              icon: Image.asset('assets/coke.png'),
            ),
          ),
          SizedBox(width: 5),
          CircleAvatar(
            backgroundColor: Colors.white,
            child: IconButton(
              onPressed: () {},
              icon: Image.asset('assets/coke.png'),
            ),
          ),

          SizedBox(width: 25),
        ],
      ),

      body: Container(
        height: double.infinity,
        width: double.infinity,
        margin: EdgeInsets.only(top: 30),

        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20),
          ),
        ),
        padding: EdgeInsets.only(top: 22, right: 33, left: 33),
        child: Column(
          children: [
            _count(),
            Row(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                _containerWidget(Color(0xFFF5CB58), 'Snack', 'assets/coke.png'),
                _containerWidget(Color(0xFFF3E9B5), 'Meal', 'assets/fork.png'),
                Spacer()
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _count() {
    return Row(
      children: [
        Text('\$50.0', style: TextStyle(fontSize: 25)),

        Spacer(),

        IconButton(
          onPressed: () {},
          icon: Icon(Icons.remove_circle, color: Color(0xFFFFDECF)),
        ),
        Text('1', style: TextStyle(fontSize: 25)),
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.remove_circle, color: Color(0xFFE95322)),
        ),
      ],
    );
  }

  // Color, String, int, double, IconData
  // ==, !=, ??, ?, =, -=, +=, 

  Widget _containerWidget(Color color, String text, String image){
    return  Padding(
      padding: const EdgeInsets.only(right: 15),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            height: 62,
            width: 49,

            decoration: BoxDecoration(
              color: color,
              borderRadius: BorderRadius.circular(30),
              image: DecorationImage(image: AssetImage(image))
            ),

          ),
          SizedBox(height: 7,),
          Text(text,)
        ],
      ),
    );
  }
}

// Some code
class Lesson04c extends StatelessWidget {
  const Lesson04c({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        leading: _button(Icons.arrow_back),
        title: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'Header label',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w600,
                color: Colors.black,
              ),
            ),
            Text(
              'Loremp text',
              style: TextStyle(fontSize: 12, color: Color(0xFF475467)),
            ),
          ],
        ),
        centerTitle: true,
        actions: [_button(Icons.more_vert)],
      ),
    );
  }

  // Color - String - int - double - 0.9 - IconData

  Widget _button(IconData icon) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: CircleAvatar(
        backgroundColor: Colors.black12,
        child: IconButton(onPressed: () {}, icon: Icon(icon)),
      ),
    );
  }
}

// Lesson04d part 1
class Lesson04d extends StatefulWidget {
  const Lesson04d({super.key});

  @override
  State<Lesson04d> createState() => _Lesson04dState();
}

class _Lesson04dState extends State<Lesson04d> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xFFF5CB58),
        leading: IconButton(
          onPressed: () {},
          icon: Image.asset('assets/arrow.png'),
        ),
        title: Text(
          'Filter',
          style: TextStyle(
            fontSize: 28,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
        centerTitle: true,
        actions: [
          _containerWidget('assets/cart.png'),
          _containerWidget('assets/person.png'),
          SizedBox(width: 35),
        ],
      ),
      backgroundColor: Color(0xFFF5CB58),
      body: Container(
        height: double.infinity,
        width: double.infinity,

        margin: EdgeInsets.only(top: 29),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
        ),
        padding: EdgeInsets.only(top: 29, left: 33, right: 33),
        child: Column(
          children: [
            Row(
              children: [
                Text(
                  '\$50.0',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFFE95322),
                  ),
                ),
                Spacer(),
                IconButton(
                  onPressed: () {},
                  icon: Icon(Icons.remove_circle, color: Color(0xFFFFDECF), size: 26.30,),
                ),
                Text('1', style: TextStyle(fontSize: 24, color: Color(0xFF391713)),),
                IconButton(
                  onPressed: () {},
                  icon: Icon(Icons.add_circle, color: Color(0xFFE95322,), size: 26.30,),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  // Color, String, int, double, IconData

  Widget _containerWidget(String image) {
    return InkWell(
      onTap: () {},
      child: Container(
        height: 26,
        width: 26,
        margin: EdgeInsets.only(right: 5),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Color(0xFFF5F5F5),
        ),
        child: Image.asset(image),
      ),
    );
  }
}

// Some code
class Lesson04d extends StatefulWidget {
  const Lesson04d({super.key});

  @override
  State<Lesson04d> createState() => _Lesson04dState();
}

class _Lesson04dState extends State<Lesson04d> {
  String selected = 'a';

  double value = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xFFF5CB58),
        leading: IconButton(
          onPressed: () {},
          icon: Image.asset('assets/arrow.png'),
        ),
        title: Text(
          'Filter',
          style: TextStyle(
            fontSize: 28,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
        centerTitle: true,
        actions: [
          _containerWidget('assets/cart.png'),
          _containerWidget('assets/person.png'),
          SizedBox(width: 35),
        ],
      ),
      backgroundColor: Color(0xFFF5CB58),
      body: Container(
        height: double.infinity,
        width: double.infinity,

        margin: EdgeInsets.only(top: 29),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
        ),
        padding: EdgeInsets.only(top: 29, left: 33, right: 33),
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Text(
                    '\$50.0',
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                      color: Color(0xFFE95322),
                    ),
                  ),
                  Spacer(),
                  IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.remove_circle,
                      color: Color(0xFFFFDECF),
                      size: 26.30,
                    ),
                  ),
                  Text(
                    '1',
                    style: TextStyle(fontSize: 24, color: Color(0xFF391713)),
                  ),
                  IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.add_circle,
                      color: Color(0xFFE95322),
                      size: 26.30,
                    ),
                  ),
                ],
              ),
          
              SizedBox(height: 27),
          
              Row(
                children: [
                  _categoryWidget(
                    'assets/Snacks.png',
                    Color(0xFFF5CB58),
                    'Snacks',
                  ),
                  _categoryWidget('assets/Snacks.png', Color(0xFFF3E9B5), 'Meal'),
                  _categoryWidget(
                    'assets/Snacks.png',
                    Color(0xFFF3E9B5),
                    'Vegan',
                  ),
                  _categoryWidget(
                    'assets/Snacks.png',
                    Color(0xFFF3E9B5),
                    'Dessert',
                  ),
                ],
              ),
              SizedBox(height: 12),
              _dividerWidget(),
              SizedBox(height: 19),
              Text(
                'Sort by',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.w600,
                  color: Color(0xFF391713),
                ),
              ),
              SizedBox(height: 16),
              Row(
                children: [
                  Text(
                    'Top rated',
                    style: TextStyle(fontSize: 14, color: Color(0xFF391713)),
                  ),
                  SizedBox(
                    width: 8,
                  ),
                  ...List.generate(
                    5,
                    (e) => Padding(
                      padding: const EdgeInsets.only(right: 5),
                      child: Image.asset(
                        'assets/star.png',
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 15,
              ),
              _dividerWidget(),
              SizedBox(
                height: 13,
              ),
              Text(
                'Categories',
                style: TextStyle(
                  fontSize: 14,
                  color: Color(0xFF391713),
                ),
              ),
              SizedBox(
                height: 16,
              ),
              GridView(
                shrinkWrap: true,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  childAspectRatio: 3.8,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10,
                ),
                children: [
                  _choiceWidget('Bruschetta'),
                  _choiceWidget('Spring Rolls'),
                  _choiceWidget('Crepes'),
                  _choiceWidget('Wings'),
                ],
              ),
              SizedBox(
                height: 30,
              ),
              _dividerWidget(),
              SizedBox(
                height: 25,
              ),
              Text(
                'Price',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.w600,
                  color: Color(0xFFE95322),
                ),
              ),
              SizedBox(
                height: 24,
              ),
              SliderTheme(
                data: SliderThemeData(
                  trackHeight: 10,
                ),
                child: Slider(
                  value: value,
                  min: 1,
                  max: 100,
                  label: '$value',
                  onChanged: (valueTwo) {
                    setState(() {
                      value = valueTwo;
                    });
                  },
                  activeColor: Color(0xFFE95322),
                  inactiveColor: Color(0xFFD9D9D9),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    _textWidget('\$1'),
                    _textWidget('\$10'),
                    _textWidget('\$50'),
                    _textWidget('\$100'),
                  ],
                ),
              ),
              SizedBox(
                height: 26,
              ),
              _radioWidget('Personal (4 Slides)', '\$0.00'),
              _radioWidget('Personal (4 Slides)', '\$0.00'),
              _radioWidget('Personal (4 Slides)', '\$0.00'),
              _radioWidget('Personal (4 Slides)', '\$0.00'),
            ],
          ),
        ),
      ),
    );
  }

  // Color, String, int, double, IconData

  Widget _radioWidget(String textOne, String textTwo){
    return Row(
      children: [
        Text(textOne),
        ...List.generate(
          19,
              (e) => Container(
            height: 2,
            width: 4,
            color: Color(0xFFFFD8C7),
            margin: EdgeInsets.only(right: 4),
          ),
        ),
        Text(textTwo),
        Radio(
          value: 'A',
          groupValue: 'A',
          onChanged: (valueOne) {},
          activeColor: Color(0xFFE95322),
        ),
      ],
    );
  }

  Widget _textWidget(String text) {
    return Text(
      text,
      style: TextStyle(fontSize: 14, color: Color(0xFF391713)),
    );
  }

  Widget _choiceWidget(String title) {
    return Container(
      decoration: BoxDecoration(
        color: Color(0xFFFFDECF),
        borderRadius: BorderRadius.circular(32.27),
      ),
      alignment: Alignment.center,
      child: Text(
        title,
        style: TextStyle(fontSize: 14.63, color: Color(0xFFE95322)),
      ),
    );
  }

  Widget _containerWidget(String image) {
    return InkWell(
      onTap: () {},
      child: Container(
        height: 26,
        width: 26,
        margin: EdgeInsets.only(right: 5),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Color(0xFFF5F5F5),
        ),
        child: Image.asset(image),
      ),
    );
  }

  Widget _categoryWidget(String image, Color color, String text) {
    return Padding(
      padding: const EdgeInsets.only(right: 19),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            height: 62,
            width: 49,

            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(30),
              color: color,
              image: DecorationImage(
                image: AssetImage(image),
              ),
            ),
          ),
          SizedBox(height: 4),
          Text(
            text,
            style: TextStyle(
              fontSize: 12,
              color: Color(0xFF391713),
            ),
          ),
        ],
      ),
    );
  }

  Widget _dividerWidget() {
    return Divider(color: Color(0xFFFFD8C7));
  }
}