The installation
-
Click the link below to download the latest release of Flutter SDK:
Flutter_macos_2. 2.3 stable. Zip
For an older release, see the page SDK Releases
-
Unzip locally:
$CD ~/development $unzip ~/Downloads/ Flutter_macOS_2.3-stablesCopy the code -
Add the Flutter tool to your environment variables:
$ export PATH="$PATH:`pwd`/flutter/bin" Copy the code
The development tools
# IDEAndroid Studio Community Version 4.2Copy the codeNote: The Flutter plugin needs to be installed
The first project
Project creation and parameter selection
- Open the IDE and select Create New Flutter Project
- Select the project type Flutter Application and click Next
- Verify that the local Flutter SDK is correct. If it is empty, check that the previous installation was successful
- Enter a project name (for example:
myapp), and select the language and parameters. My choices are as follows:
- Language choice
Kotlin ｜ Swift- The target platform selected all the mainstream platforms:
Android & IOS & web
And then I’m gonna hit Next
- Click Finish
- Waiting for Android Studio to install the SDK and create the project, the created project initial directory structure is as follows:
Run the project
Select the target environment in Android Studio and click “Run” to start our project in the simulator. The effect is as follows:
The operation effect of the project is shown as follows:
We can see the official homepage of the demo, Flutter Demo Home Page. Click the ➕ button in the lower right corner to increase the number in the middle of the screen.
This is a bit complicated for me as a first-time user of a flutter, I just want a Hello flutter
Hello Flutter
Dart file (I removed some of his comments) :
import 'package:flutter/material.dart';
void main(a) {
runApp(MyApp());
}
// This widget is the root widget of the app
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// Define the theme of the app here
// Run the project and you will see that the app has a blue toolbar
// Then, do not exit the app
// Change primarySwatch to colors.green and save, the IDE will automatically trigger hot updates
// Note: the number in the middle of the screen does not return to zero, indicating that the app has not been restarted
// command line: flutter run; Typing r triggers hot updates
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page')); }}// Here is the home page of the app
// It was stateful, which means it needed to have a state object (defined in the next class).
// The field in the status object will affect the page rendering
// MyHomePage is used to configure the state object
// MyHomePage will get the value (title) from the parent widget (MyApp),
// And use these values in the build method of the state object
// Subclasses of widgets should have fields that are final
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState(a) => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter(a) {
setState(() {
// Calling the setState method notifies the Flutter framework that there is a state change in the current Flutter state object.
// After that, call the build method below to re-render the page with the changed values
// If you don't use setState, change _counter directly
// The build method is not called again, so nothing happens on the page
_counter++;
});
}
@override
Widget build(BuildContext context) {
// every time setState is called it triggers a rerun of the method
// The Flutter framework is optimized so that re-running the build method is quick
// This way you can just rebuild whatever you need without changing a full instance of a widget
return Scaffold(
appBar: AppBar(
// Here we can get the value defined in the app.build method from the MyHomePage object
// In this case, title will be used on the app bar
title: Text(widget.title),
),
body: Center(
// Center is a component layout, centered
// This layout can carry a single child element in the middle of the parent element
child: Column(
// Column is also a type of layout
// Open the wireframe of each component by doing the following:
Adroid Studio uses "Toggle Debug Paint" in the Flutter Inspector window
// 2. Enter p
// 3. Use the "Toggle Debug Paint" command in Visual Studio
// Here we use mainAxisAlignment to center the child of Column vertically
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment', child: Icon(Icons.add), ), ); }}Copy the codeTo display the Hello Flutter, change the return value of the build method in the _MyHomePageState class.
import 'package:flutter/material.dart';
void main(a) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello Flutter',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(title: 'Hello Flutter')); }}class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState(a) => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter(a) {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello Flutter',),),),); }}Copy the codeThe following information is displayed:
Refer to the link
MacOS installs the Flutter environment