Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate from not responsive project to responsive one with this package #143

Open
A7MeDG0L0L opened this issue May 26, 2023 · 2 comments
Open

Comments

@A7MeDG0L0L
Copy link

Currently I Migrate project to be Responsive using this package but I have some questions ...

1- if widgets using a hardcoded values for width and height should I delete these values ?
2- if there's multiple desgins in figma for web and mobile how to dealing with that .. Should I use widget called ResponsiveRowColumn .. if yes how it works ?

overall Is Migration will take alot of time to be responsive app ?

@A7MeDG0L0L
Copy link
Author

A7MeDG0L0L commented May 26, 2023

Widget example in the project ...


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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 1360,
          height: 387,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              color: AppColor.containerColor4),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 30),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Image.asset(
                  'assets/images/mercides.png',
                  width: 432,
                  height: 305,
                ),
                const SizedBox(
                  width: 25,
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Image.asset(
                      'assets/images/win.png',
                      width: 157,
                      height: 58,
                    ),
                    CustomTxt(
                        text: 'Mercedes C200 ',
                        size: 25,
                        weight: FontWeight.bold,
                        color: AppColor.textColor2),
                    CustomTxt(
                        text: 'Buy a Rosso Pencil and Make it yours!',
                        size: 20,
                        weight: FontWeight.w500,
                        color: AppColor.textColor2),
                    CustomTxt(
                        text: 'AED 10.00',
                        size: 25,
                        weight: FontWeight.bold,
                        color: AppColor.textColor2),
                    const SizedBox(
                      height: 26,
                    ),
                    Row(
                      children: [
                        Stack(
                          alignment: Alignment.bottomRight,
                          children: [
                            Icon(
                              Icons.calendar_today,
                              color: AppColor.iconColor4,
                              size: 35,
                            ),
                            Icon(
                              Icons.check_circle,
                              color: AppColor.iconColor5,
                              size: 20,
                            )
                          ],
                        ),
                        const SizedBox(
                          width: 5,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            CustomTxt(
                                text: 'Max draw date : August 29 ,2023 ',
                                size: 12,
                                weight: FontWeight.bold,
                                color: AppColor.textColor2),
                            CustomTxt(
                                text: 'Or earlier if the campign is sold out.',
                                size: 12,
                                weight: FontWeight.w400,
                                color: AppColor.textColor2),
                          ],
                        )
                      ],
                    ),
                    const SizedBox(
                      height: 25,
                    ),
                    Row(
                      children: [
                        Counter1(),
                        const SizedBox(
                          width: 25,
                        ),
                        CustomButton(
                          containerColor: AppColor.containerColor5,
                          textColor: AppColor.textColor3,
                          text: 'Add To Cart',
                          width: 300,
                          height: 57,
                          fontWeight: FontWeight.w500,
                          fontSize: 14,
                          onPressed: () {},
                          borderColor: AppColor.containerColor5,
                        ),
                      ],
                    ),
                  ],
                ),
                const SizedBox(
                  width: 48,
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    CustomTxt(
                        text: '1005 Sold Out of 1985',
                        size: 16,
                        weight: FontWeight.w500,
                        color: AppColor.textColor1),
                    LinearPercentIndicator(
                      percent: 0.5,
                      width: 170,
                      lineHeight: 10,
                      animation: true,
                      progressColor: AppColor.containerColor5,
                      backgroundColor: AppColor.containerColor3,
                      barRadius: const Radius.circular(60),
                      //padding: EdgeInsets.only(left: screenSize.width / 110),
                    ),
                    const Spacer(),
                    CustomIcon(
                      iconColor: AppColor.iconColor2,
                      icon: Icons.favorite_border,
                      width: 65,
                      hight: 57,
                      iconSize: 40,
                      onPressed: () {},
                    ),
                    const SizedBox(
                      height: 25,
                    ),
                    const CustomImage(
                        path: 'assets/icons/share.png',
                        width: 65,
                        hight: 57,
                        imageWidth: 21,
                        iamgeHight: 17),
                    // SizedBox(
                    //   height: screenSize.width / 90,
                    // )
                  ],
                ),
              ],
            ),
          ),
        ),
        const SizedBox(
          height: 40,
        )
      ],
    );
  }
}

@mdmm13
Copy link

mdmm13 commented Sep 12, 2023

Might be solved with the migration guide?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants