Prefacio: como marco de desarrollo de aplicaciones móviles, Flutter tiene muchas ventajas y algunas limitaciones. La mayor ventaja es el desarrollo multiplataforma: Flutter puede realizar el desarrollo multiplataforma en múltiples plataformas, como iOS y Android, y usar un conjunto de códigos para escribir aplicaciones, lo que ahorra tiempo y costos de desarrollo.
Flutter puede compilar programas para las siguientes plataformas:
1. Android: Flutter puede generar archivos APK de aplicaciones de Android y ejecutarlos en dispositivos Android.
2. iOS: Flutter puede generar archivos IPA para aplicaciones iOS y ejecutarlos en dispositivos iOS.
3. Web: Flutter se puede compilar en JavaScript para generar aplicaciones que se pueden ejecutar en un navegador web.
4. Windows: Flutter puede generar aplicaciones de escritorio en el sistema operativo Windows.
5. macOS: Flutter puede generar aplicaciones de escritorio en el sistema operativo macOS.
6. Linux: Flutter puede generar aplicaciones de escritorio en el sistema operativo Linux.
Vale la pena señalar que aunque Flutter se puede compilar en aplicaciones para diferentes plataformas, la experiencia en cada plataforma puede ser diferente y es posible que se requieran algunos ajustes y optimizaciones relacionados con la plataforma.
Tomemos como ejemplo el desarrollo de Android,
Para crear un entorno de desarrollo de Flutter, siga los pasos a continuación:
1. Instale el SDK de Flutter:
Primero, debe descargar e instalar el SDK de Flutter. En el sitio web oficial de Flutter ( https://flutter.dev ), seleccione el paquete de instalación correspondiente a su sistema operativo para descargar. Descomprima el archivo descargado y agregue el directorio bin de flutter a la variable de entorno PATH del sistema, para que pueda usar el comando flutter directamente en la línea de comando.
Instale el SDK de Dart: Flutter usa el lenguaje Dart para el desarrollo, por lo que también debe instalar el SDK de Dart. El SDK de Dart ya está incluido en el SDK de Flutter, por lo que no necesita instalarlo por separado.
2. Ejecute flutter doctor en la línea de comando para verificar la instalación, el entorno de configuración y las dependencias del SDK de Flutter, y brinde las sugerencias y consejos correspondientes.
-
[×] indica que no está funcionando correctamente
-
[!] indica que todavía hay algunos problemas
-
Solo cuando todos son [√], el entorno del sistema está completamente instalado y su informe de inspección es correcto
Vea qué configuración falta, qué se necesita y busque qué configuración agregar
3. Configurar el editor:
Elija un editor que se adapte a usted para el desarrollo de Flutter. Los editores de uso común incluyen Android Studio, Visual Studio Code (VS Code) e IntelliJ IDEA. Instale el editor de su elección, elegí Android Stuido, busque los complementos Dart y flutter en Archivo> Configuración> Complementos e instálelos, estos dos complementos pueden proporcionar finalización de código, depuración y otras funciones para mejorar la eficiencia del desarrollo.
agregar herramienta
4. Crea un nuevo proyecto de aleteo
El siguiente paso está bien, haga clic en Ejecutar
En el directorio del proyecto, el código de la interfaz de usuario de su aplicación se encuentra en lib/main.dart.
4. Configure el emulador o dispositivo real:
Para ejecutar y depurar una aplicación Flutter en un emulador o en un dispositivo real, debe configurar el dispositivo en consecuencia. Para el desarrollo de Android, puede usar un emulador de Android o conectar un dispositivo real a través de USB. Para el desarrollo de iOS, debe usar Xcode para emular o conectarse a un dispositivo real.
Durante el proceso de compilación, algunos archivos no se descargaron correctamente. Vuelva a hacer clic en Ejecutar y puedo ejecutar la pantalla directamente aquí.
6. Compilar apk
O en la línea de comando, ingrese flutter build apk en el directorio correspondiente para compilar apk
7. El archivo de contenido principal lib/main.dart
Después de modificar y guardar el contenido, la vista se puede actualizar, es decir, la capacidad de depurar rápidamente. Esto solo me da una gran impresión de flutter.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
/// 这里我们的MyApp是一个类，继承了StatelessWidget
class MyApp extends StatelessWidget {
const MyApp({super.key});
/// 这个组件是这个app的根 这是一个无状态部件，然后实现构造方法，
@override
Widget build(BuildContext context) {
///构造方法里面通过MaterialApp()函数定义风格，然后是标题、主题和主页面信息，
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
///这里有一个Colors.blue，你试一下改成red，或者green。
///如果你这时候项目是运行在模拟器 或者真机上的话，你可以修改后Ctrl + S 进行保存。就能同步展示
colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
useMaterial3: true,
),
/// 这里主页面home中调用MyHomePage()函数，也就是我们当前页面所显示的内容。
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
// return MaterialApp(
// title: '天气预报小程序',
// theme: ThemeData(
// primarySwatch: Colors.blue,
// ),
// home: WeatherPage(),
// );
}
}
/// 这里MyHomePage继承StatefulWidget，
/// 这是一个有状态的部件，这里就需要一个状态了，
/// 通过createState()得到一个_MyHomePageState，
/// 这个_MyHomePageState()就是这个页面的主要内容了，它里面是
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
/// 在 build 方法中，我们通常通过对基础 Widget 进行相应的 UI 配置，或是组合各类基础 Widget 的方式进行 UI 的定制化。
@override
Widget build(BuildContext context) {
///这里返回一个Scaffold，这是一个脚手架，用来构建页面
return Scaffold(
///然后我们看Scaffold中的内容，AppBar 是页面的导航栏，我们直接将 MyHomePage 中的 title 属性作为标题使用。
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
///这里我们从App.build方法创建的MyHomePage对象中获取值，并使用它来设置appbar的标题。
title: Text(widget.title),
),
///body 则是一个 Text 组件，显示了一个根据 _counter 属性可变的文本：‘You have pushed the button this many times:$_counter’。
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，则是页面右下角的带“+”的悬浮按钮。我们将 _incrementCounter 作为其点击处理函数。
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
https://blog.csdn.net/ly_xiamu/article/details/131931803
referencia:
https://www.cnblogs.com/libo-web/p/16060590.html
Creación del entorno de desarrollo Android Flutter: se busca programador
Crear valor, feliz de compartir! 776147358