To Use Media Query to make APP more dynamic

[HARSHBHUDOLIA]

Description

The app needs to be user friendly when the orientation and sizes of mobile devices differ, it also needs to be responsive and adaptive to both android and IOS which might be a problem with some segments of code used

Screenshots

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Use the above-mentioned file (size_config.dart) to add MediaQuery to all the required files
2. Comment the names of the files here before adding MediaQuery
3. Check for the Renderflex issue (It will be device-specific) before adding the MediaQuery feature

Additional data

You can post the screenshot of the renderflex page or the dart file to have a discussion here.

[Mohitmadhav]

Okay, @HARSHBHUDOLIA. We can make a separate dart file for all orientations and MediaQuery stuff. Note this @wick3ds0ul and you can do the add ons.

[HARSHBHUDOLIA]

Don't do anything like making more dart files, using the ternary operator, and if statement is enough to take care of such issues. Example MediaQuery.of(context).size.width > 360 ? FlatButton.icon( onPressed: () { deleteTransaction(transactions[index].id); }, icon: Icon(Icons.delete), textColor: Theme.of(context).errorColor, label: Text('Delete'), ) : IconButton( onPressed: () { deleteTransaction(transactions[index].id); }, icon: Icon(Icons.delete), color: Theme.of(context).errorColor, ),

Here we have different widgets rendered according to different sizes.

Another example will be

final isLandScape = mediaQuery.orientation == Orientation.landscape if (!isLandScape) Container( height: (mediaQuery.size.height - appBar.preferredSize.height - mediaQuery.padding.top) * 0.3, child: Chart(_recentTransactions)), if (!isLandScape) txListWidget, if (isLandScape) _showChart ? Container( height: (mediaQuery.size.height - appBar.preferredSize.height - mediaQuery.padding.top) * 0.7, child: Chart(_recentTransactions)) : txListWidget ], ),

[HARSHBHUDOLIA]

This is an example of using LayoutBuilder for dynamic height calculations

LayoutBuilder(builder: (ctx, constraints) { return Column( children: [ Text( 'No Transactions added yet', style: Theme.of(context).textTheme.title, ), SizedBox( height: 10, ), Container( height: constraints.maxHeight * 0.6, child: Image.asset( 'assets/images/waiting.png', fit: BoxFit.cover, ), ), ], ); })

[AyushTripathi28]

Hello, I am participating in Hacktoberfest this year. I want to contribute to this issue. Kindly assign me this issue.

[Mohitmadhav]

Sure @AyushTripathi28, and make sure to follow the updated guidelines mentioned in README.

[AyushTripathi28]

Thank you so much to assign me this issue.

[Mohitmadhav]

@AyushTripathi28, any updates?

[Mohitmadhav]

Hi Ali,

I don't know why your comment is not being displayed in GitHub. Can you please type this again in the Github chat?

Regards Mohit

On Tue, Jan 31, 2023 at 4:48 PM Ali Asar Khowaja @.***> wrote:

Hi @Mohitmadhav https://github.com/Mohitmadhav @ankitoscar https://github.com/ankitoscar Can you assign me this issue? I want to contribute to this issue.

— Reply to this email directly, view it on GitHub https://github.com/Project-Easter/Flutter-UI/issues/50#issuecomment-1410179590, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOEVZOI6TH4S7AREJQTF6S3WVDYI5ANCNFSM46MK4ZNQ . You are receiving this because you were mentioned.Message ID: @.***>