This is a simple Flutter app that generates random word pairings and allows users to generate a new word pairing by pressing a button.
My first app built in Flutter.
- Clone the repository:
git clone https://github.com/csabika98/hello_world_flutter.git- Navigate to the project directory:
cd hello_world_flutter- Get the dependencies:
flutter pub get1. Open `lib/main.dart` in VS Code.2. Select your target device in the bottom right corner of VS Code.3. Click the "play" button in the upper right-hand corner of VS Code.4. The app will launch in debug mode.- Add the following button code to
lib/main.dart:
ElevatedButton(
onPressed: () {
appState.getNext();
},
child: Text('Next'),
);- Save the file. The app will update with a new button.
- Modify the string in the first
Textwidget: Text('A random AWESOME idea:'), - Save the file to see the changes immediately.
1. Add a `getNext` method in `MyAppState`:
void getNext() {
current = WordPair.random();
notifyListeners();
}- Update the button's
onPressedcallback to callgetNext():
onPressed: () {
appState.getNext();
},-
Extract the word pair display into a separate widget
BigCard. -
Wrap the
BigCardwithPaddingandCardwidgets for better styling. -
Apply a theme to the card and text:
final theme = Theme.of(context);
final style = theme.textTheme.displayMedium!.copyWith(
color: theme.colorScheme.onPrimary,
);- Improve screen reader support by setting the
semanticsLabel:
semanticsLabel: "${pair.first} ${pair.second}",
- Center the contents vertically and horizontally using
mainAxisAlignmentandCenterwidget:
mainAxisAlignment: MainAxisAlignment.center,
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var appState = context.watch<MyAppState>();
var pair = appState.current;
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BigCard(pair: pair),
SizedBox(height: 10),
ElevatedButton(
onPressed: () {
appState.getNext();
},
child: Text('Next'),
),
],
),
),
);
}
}