当前位置：首页 > news >正文

flutter: getx安装及使用路由的例子

news 2026/3/26 19:46:57

一，安装

在pub的地址:

https://pub.dev/packages/get

编辑pubspec.yaml

dependencies:get: ^4.7.3

然后点击 pub get

二，例子：

main.dart:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'routes/routes.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return   GetMaterialApp(debugShowCheckedModeBanner: false, //去除debug图标defaultTransition: Transition.rightToLeft,   //指定动画theme: ThemeData(primarySwatch: Colors.red),initialRoute: "/",    //初始化页面getPages: APPage.routes,   //路由);}}

routes.dart:

import 'package:get/get.dart';
import '../pages/DetailPage.dart';
import '../pages/HomePage.dart';class APPage {static final routes = [GetPage(name: '/', page: () => HomePage()),GetPage(name: "/detail", page: () => DetailPage(),),];
}

DetailPage.dart:

import 'package:flutter/material.dart';
import 'package:get/get.dart';class DetailPage extends StatefulWidget {@overrideState<DetailPage> createState() => _DetailPageState();
}class _DetailPageState extends State<DetailPage>  {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.surfaceContainer,title: const Text("detail页面"),),body: Center(child: ElevatedButton(child: Text("返回home页面"),onPressed: () {print("接收到的参数:");print(Get.arguments);print("参数:id:");print(Get.arguments['id']);print("参数:name:");print(Get.arguments['name']);Get.back();},),),);}}

HomePage.dart:

import 'package:flutter/material.dart';
import 'package:get/get.dart';class HomePage extends StatefulWidget {@overrideState<HomePage> createState() => _HomePageState();
}class _HomePageState extends State<HomePage>  {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: const Text("home页面"),),body: Center(child: ElevatedButton(child: Text("跳转到detail页面"),onPressed: () {Get.toNamed("/detail",arguments: {"id":20,"name":"苏东坡新传",});},),),);}}