Responsive wrapping rows with specific widths and alignments - flutter

Question

I want my flutter app to look a certain way when the phone is tilted vs when it's held normally.
I have created a solution for each state but I can't figure out a solution that works for both at once.
So my question is: how can I achieve the following with one codebase?
- and if it is not easily possible: how can I make my app dynamically decide which layout to use?
Here's a minified example of my app (my generateList* methods are shown below):
void main(List<String> arguments) async {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Test",
home: Scaffold(
body: ListView(
//children: generateListTilted(),
//or
children: generateListNotTilted(),
),
),
);
}
}
I have rows with two fields of information, the date and the content.
The date does not always have the exact width 'cause the months are spelled out, but it's similar.
The content always has the same length.
Case: phone tilted/wide screen
If there is enough space for both fields in one line, each row should look like it has two colums - the first one having the width of the largest date field, and the second one just filling out the rest of the space and being centered. I didn't know how to adjust the width automatically to the widest date so I just set the flex property as a workaround:
List<Widget> generateListTilted() {
var sameSizeContent = "TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEST";
var slightlyVariableLengthDates = ["August, 21 2019", "May, 1 2019"];
List<Widget> listOfRows = [];
for (var i = 0; i < slightlyVariableLengthDates.length; i++) {
listOfRows.add(
Container(
padding: const EdgeInsets.all(2.0),
child: Row(
children: <Widget>[
Expanded(
flex: 3,
child: Text(
slightlyVariableLengthDates[i],
textAlign: TextAlign.right,
)),
Expanded(
flex: 7,
child: Text(
sameSizeContent,
textAlign: TextAlign.center,
),
)
],
),
),
);
}
return listOfRows;
}
Case: phone not tilted/small screen
If the date and content do not fit in one line, they should wrap and the date should be on the top left - but again have the width of the longest date and right alignment (I was not able to achieve this so I edited the screenshot to make it clear).
The content should be centered again:
List<Widget> generateListNotTilted() {
var sameSizeContent = "TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEST";
var slightlyVariableLengthDates = ["August, 21 2019", "May, 1 2019"];
List<Widget> listOfRows = [];
for (var i = 0; i < slightlyVariableLengthDates.length; i++) {
listOfRows.add(
Container(
padding: const EdgeInsets.all(2.0),
child: Row(
children: <Widget>[
Expanded(
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Text(
slightlyVariableLengthDates[i],
),
Center(child: Text(sameSizeContent))
],
),
),
],
),
),
);
}
return listOfRows;
}

Answer 1

I want my flutter app to look a certain way when the phone is tilted
vs when it's held normally. I have created a solution for each state
but I can't figure out a solution that works for both at once.
Use MediaQuery to know about your current screen orientation and other device related information.
Example Code:
Container(
alignment: Alignment.center,
child:
(MediaQuery.of(context).orientation == Orientation.portrait)
Text("Portrait")
:
Text("Landscape")
)
Note: I have used ternary operator outside the Text widget to show that ternary operator can be used almost anywhere(Widget,String,parameter values), where we just need to apply small logical UI changes.

Answer 2

If you're looking at making your UI responsive, please checkout the answer to a similar question.