 |
VOOZH | about |
|
VOOZH | about |
We’re so glad you’re here. You can expect all the best TNS content to arrive Monday through Friday to keep you on top of the news and at the top of your game.
Check your inbox for a confirmation email where you can adjust your preferences and even join additional groups.
Follow TNS on your favorite social media networks.
Become a TNS follower on LinkedIn.
Check out the latest featured and trending stories while you wait for your first TNS newsletter.
flutter doctor -vnamer_app, thinking I was building something else. The template app is much simpler than the Sunflower example explained in my last post, but has the same structure.
I hit build (F5 within Mac).
👁 Image
MyHomePage class, holds the state — which we’ll need to deal with the button and events.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
...
}
class MyHomePage extends StatefulWidget {
...
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
...
}
MyApp class sets the color theme, creates the title, and creates the MyHomePage class with page title in purple.
class MyApp extends StatelessWidget {
const MyApp({super.key}); // This widget is the root of your application.
@override Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.deepPurple),
useMaterial3: true, ),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
_MyHomePageState class has the responsibility to create the screen and increment the button:
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text( 'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
Scaffold object, which holds the AppBar, a central Column with the Text and counter objects, and the button. The button clearly sets up the event listener _incrementCounter method, which moves the counter up one and announces a state change — forcing an update. If I hover over the button, it does indeed show the text “Increment” as a tooltip.
The debug app has been fully packaged, and the build result here can be run within the Application folder of my Mac:
👁 Image
launch.json appears to already have three configurations:
{
"version": "0.2.0",
"configurations": [
{
"name": "namer_app",
"request": "launch",
"type": "dart"
},
{
"name": "namer_app (profile mode)",
"request": "launch",
"type": "dart",
"flutterMode": "profile"
},
{
"name": "namer_app (release mode)",
"request": "launch",
"type": "dart",
"flutterMode": "release"
}
]
}
Release directory as a sister to the Debug directory. While running this app, we do indeed have a correctly packaged 46MB app that isn’t in debug mode:
👁 Image
