Flutter自适应布局插件adaptive_keros的使用

Adaptive Keros 是一个用于创建适应不同操作系统的 Flutter 应用程序的包。通过使用这个包，你可以轻松地根据不同的设备（如 iPhone 和 Android）来调整你的应用布局。

示例截图

开始使用

要在你的 Flutter 项目中使用 adaptive_keros 包，首先需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  adaptive_keros: ^1.0.1

然后运行 flutter pub get 来获取该包。

使用方法

在 Dart 文件中导入 adaptive_keros 包：

import 'package:adaptive_keros/adaptive_keros.dart';

接下来，你可以使用 Adaptive.scaffold 来构建一个自适应的 Scaffold。以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:adaptive_keros/adaptive_keros.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrangeAccent),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Adaptive.scaffold(
      string: 'Test',
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          // 创建一个自适应文本组件
          Adaptive.text(
            Colors.red[900],
            20,
            TextAlign.center,
            string: 'Ceci est notre App Test'
          ),
          
          // 创建一个自适应按钮组件
          Adaptive.button(
            onPressed: () => Adaptive.alert(
              context: context,
              onPressed: () {
                print("Test");
                Navigator.pop(context);
              },
            ),
            child: Adaptive.text(
              Colors.red[900],
              20,
              TextAlign.center,
              string: 'Press Me'
            ),
          ),
          
          // 创建另一个自适应按钮组件
          Adaptive.button(
            child: Adaptive.text(
              Colors.red[900],
              20,
              TextAlign.center,
              string: 'Montrer l\'alerte'
            ),
            onPressed: () {
              Adaptive.alert(
                context: context,
                onPressed: () {
                  Navigator.pop(context);
                }
              );
            }
          )
        ],
      )),
    );
  }
}

代码解释

1. 导入包：

   import 'package:adaptive_keros/adaptive_keros.dart';
   

2. 创建应用入口：

   void main() {
     runApp(const MyApp());
   }
   

3. 定义 MyApp 类：

   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         debugShowCheckedModeBanner: false,
         title: 'Flutter Demo',
         theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrangeAccent),
           useMaterial3: true,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

4. 定义 MyHomePage 类：

   class MyHomePage extends StatefulWidget {
     const MyHomePage({super.key, required this.title});
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   

5. 实现 _MyHomePageState 类：

   class _MyHomePageState extends State<MyHomePage> {
     @override
     Widget build(BuildContext context) {
       return Adaptive.scaffold(
         string: 'Test',
         body: Center(
             child: Column(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: [
                 Adaptive.text(
                   Colors.red[900],
                   20,
                   TextAlign.center,
                   string: 'Ceci est notre App Test'
                 ),
                 Adaptive.button(
                   onPressed: () => Adaptive.alert(
                     context: context,
                     onPressed: () {
                       print("Test");
                       Navigator.pop(context);
                     },
                   ),
                   child: Adaptive.text(
                     Colors.red[900],
                     20,
                     TextAlign.center,
                     string: 'Press Me'
                   ),
                 ),
                 Adaptive.button(
                   child: Adaptive.text(
                     Colors.red[900],
                     20,
                     TextAlign.center,
                     string: 'Montrer l\'alerte'
                   ),
                   onPressed: () {
                     Adaptive.alert(
                       context: context,
                       onPressed: () {
                         Navigator.pop(context);
                       }
                     );
                   }
                 )
               ],
             )),
       );
     }
   }