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.