flutter开发解决方案

╰半夏微凉° 2023-01-10 05:24 88阅读 0赞

# 环境配置 #

1.  建议使用java8
2.  andorid sdk 选中对号 apply  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU_size_16_color_FFFFFF_t_70]

# 设置主题 #

MaterialApp(
            home:Home(),
            theme: ThemeData(primarySwatch: Colors.yellow,
            highlightColor: Color.fromRGBO(255, 255, 255, 0)
            ),
            debugShowCheckedModeBanner: false,//关闭debu 图标
    
        );

# 顶部tab切换 #

DefaultTabController(length: 3, 
        child:Container(
           child: Scaffold(
             
             appBar: AppBar(
               title: Text("BLUESKY"),
               elevation: 0,
               actions: [
                 IconButton(icon: 
                 Icon(Icons.search), onPressed:  ()=>{ print("搜索")})
               ],
               leading: IconButton(icon: Icon(Icons.menu), 
               onPressed: ()=>{ print("1231")}
               ),
               bottom: TabBar(
                 unselectedLabelColor: Colors.black,
                 indicatorColor: Colors.black26,
                 indicatorWeight: 1.0,
                 tabs: [
                   Tab(icon: Icon(Icons.dangerous),),
                     Tab(icon: Icon(Icons.search_off_outlined),),
                       Tab(icon: Icon(Icons.change_history),)
                 ],
               ),
             ),
             body:TabBarView(children: [
                Icon(Icons.label_important_outline,size: 128,),
                 Icon(Icons.label_important_outline,size: 128,),
                  Icon(Icons.label_important_outline,size: 128,)
             ],)
           ),
           
             )
            
         );
      }

# 抽屉 #

Scaffold 部件内部配置 这个是页面盒子页面相关的都在这里配置  
宽度在外面套容器部件即可

1.  drawer 左面抽屉
2.  endDrawer 右边抽屉

Drawer(
     child: Container(
              color: Colors.white,
              padding: EdgeInsets.zero,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                 DrawerHeader(child: 
                  Text("123")
                 )
                ]
              ),
            ) ,
            ),

# 用户信息组件 #

UserAccountsDrawerHeader

# 关闭点击波浪 #

MaterialApp(
            home:Home(),
            theme: ThemeData(primarySwatch: Colors.yellow,
           highlightColor: Colors.transparent,
     splashColor: Colors.transparent
            ),
            debugShowCheckedModeBanner: false,//关闭debu 图标
    
        );

# flutter 路由 #

## 指定页面跳转 ##

//路由跳转到指定页面
         Navigator.of(context).push(
                 MaterialPageRoute(builder: (BuildContext context){ 
                   return NavDemo();
                 })
               );
    Navigator.pop(context);//返回

## 命名路由 ##

MaterialApp(
            home:Home(),
            routes: { 
              "/home":(context)=>NavDemo()
            },
            theme: ThemeData(primarySwatch: Colors.yellow,
           highlightColor: Colors.transparent,
     splashColor: Colors.transparent
            ),
            debugShowCheckedModeBanner: false,//关闭debu 图标
    
        );
        //跳转
        Navigator.pushNamed(context, "/home");

## 封装统一路由处理 ##

import 'package:flutter/material.dart';
        final routes = { 
            // '/test':(context)=>TestPage(),
            // '/detail':(context)=>DetailsPage(),
        };
    //固定写法
    var onGenerateRoute=(RouteSettings settings) { 
          // 统一处理
          final String name = settings.name; 
          final Function pageContentBuilder = routes[name];
          if (pageContentBuilder != null) { 
            if (settings.arguments != null) { 
              final Route route = MaterialPageRoute(
                  builder: (context) =>
                      pageContentBuilder(context, arguments: settings.arguments));
              return route;
            }else{ 
                final Route route = MaterialPageRoute(
                  builder: (context) =>
                      pageContentBuilder(context));
                return route;
            }
          }
    };
    //引入方式
    MaterialApp(
            home:Home(),
             onGenerateRoute: onGenerateRoute,
            theme: ThemeData(primarySwatch: Colors.yellow,
           highlightColor: Colors.transparent,
     splashColor: Colors.transparent
            ),
            debugShowCheckedModeBanner: false,//关闭debu 图标
    
        );

#### 路由跳转 ####

Navigator.pushNamed(context, "/home",arguments:{ "name":"llt"});

#### 路由初始化 ####

final routes = { 
            // '/test':(context)=>TestPage(),
            '/detail':(context)=>DetailsPage(),//无参路由
            //带参路由
             "/home":(context,{ arguments})=>NavDemo(title: arguments['name'],)
        };

#### 接受传递参数 ####

import 'package:flutter/material.dart';
    
    class NavDemo extends StatefulWidget { 
     final title;
     NavDemo({ Key key,this.title}) : super(key: key);
    
     @override
     _NavDemoState createState() => _NavDemoState();
    }
    
    class _NavDemoState extends State<NavDemo> { 
     @override
     @override
     Widget build(BuildContext context) { 
       return Scaffold(
         appBar: AppBar(title:Text(widget.title),),
         body: 
        
         Container(
          child: Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FlatButton(onPressed: (){ 
                  Navigator.pop(context);
                }, child: Text("Home"))
              ],
            ),
          ),
       ),
        );
     }
    }

# flutter 地图 #

高德导航 [https://lbs.amap.com/api/flutter/summary][https_lbs.amap.com_api_flutter_summary]  
高德地图使用文档 [https://lbs.amap.com/api/flutter/guide/map-flutter-plug-in/map-flutter-info][https_lbs.amap.com_api_flutter_guide_map-flutter-plug-in_map-flutter-info]  
高德定位文档 [https://lbs.amap.com/dev/demo/flutter-loc\#Android][https_lbs.amap.com_dev_demo_flutter-loc_Android]

## 高德地图使用教程 ##

[https://blog.csdn.net/BLUESKYHOST/article/details/113247059][https_blog.csdn.net_BLUESKYHOST_article_details_113247059]

# 单位尺寸处理方案 #

flutter\_screenutil 插件目前最好的适配插件 [地址][Link 1]  
有中文文档

# 分离视图与数据 #

**mixin** 使用这个关键词做到分离

import 'package:flutter/material.dart';
    import 'package:flutter_screenutil/flutter_screenutil.dart';
    void main() { 
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget { 
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) { 
        return ScreenUtilInit(
          designSize: Size(750, 1334),
          allowFontScaling: true,//开启字体自适应
          child:MaterialApp(
          title: '次元新星',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: '次元新星'),
        ),
        );
        
        
         
      }
    }
    
    class MyHomePage extends StatefulWidget { 
      MyHomePage({ Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    mixin _MyHomeState <T extends StatefulWidget> on State<T> { 
      int _counter = 0;
        void _incrementCounter() { 
          setState(() { 
            _counter++;
          });
        }
    }
    class _MyHomePageState extends State<MyHomePage> with _MyHomeState { 
      @override
      Widget build(BuildContext context) { 
        // This method is rerun every time setState is called, for instance as done
        // by the _incrementCounter method above.
        //
        // The Flutter framework has been optimized to make rerunning build methods
        // fast, so that you can just rebuild anything that needs updating rather
        // than having to individually change instances of widgets.
        return Scaffold(
          appBar: AppBar(
            // Here we take the value from the MyHomePage object that was created by
            // the App.build method, and use it to set our appbar title.
            title: Text(widget.title),
          ),
          body: Center(
            // Center is a layout widget. It takes a single child and positions it
            // in the middle of the parent.
            child: Column(
              // Column is also a layout widget. It takes a list of children and
              // arranges them vertically. By default, it sizes itself to fit its
              // children horizontally, and tries to be as tall as its parent.
              //
              // Invoke "debug painting" (press "p" in the console, choose the
              // "Toggle Debug Paint" action from the Flutter Inspector in Android
              // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
              // to see the wireframe for each widget.
              //
              // Column has various properties to control how it sizes itself and
              // how it positions its children. Here we use mainAxisAlignment to
              // center the children vertically; the main axis here is the vertical
              // axis because Columns are vertical (the cross axis would be
              // horizontal).
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container( 
                  width: ScreenUtil().setWidth(132),
                  height: ScreenUtil().setHeight(53),
                  color: Color.fromRGBO(251, 120, 154, 1),
                  child: Center(
                    child: Text("+关注",style: TextStyle(color: Colors.white),),
                  ),
                ),
                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),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
      }
    }

# 数据模型快速构建 #

> 给你们推荐一款出道就是颠峰的插件

项目地址 [https://github.com/flutterchina/json\_model/blob/master/README-ZH.md][https_github.com_flutterchina_json_model_blob_master_README-ZH.md]

**注意细节**

1.  在项目最外层创建jsons的文件夹  
    ![在这里插入图片描述][20210128150922656.png]
2.  jsons文件夹里面文件的json文件名字不要大写小写

# 数据库 #

## 关系型数据库 ##

**sqflite**  
自己简单封装的 看看就好

import 'package:flutter_xinxing/models/authinfo.dart';
    import 'package:sqflite/sqflite.dart';
    
    import 'db.dart';
    class DbMethod{ 
      Database db;
      final table = "authinfo";
    
      initConfig()async{ 
         var path = await initDb('xinxing.db');
       
        if(db==null){ 
           db = await openDatabase(path, version: 1,
              onCreate: (Database db, int version) async { 
            await db.execute(
                '''
                CREATE TABLE  $table(
                  user_id INTEGER PRIMARY KEY AUTOINCREMENT ,
                  token TEXT ,
                  unionid TEXT ,
                  phone INTEGER  ,
                  mobile TEXT ,
                  hss_id INTEGER , session_key TEXT , img_off INTEGER , xcx_atr_switch INTEGER , openid TEXT , access_token TEXT
                  )
                 ''');
          });
        }
      }
      /* 插入数据 */
      insert(Map<String,dynamic> data)async { 
          await db.insert(table, data);
      }
      /* 更新数据 */
      update(num id,Map<String,dynamic> data)async{ 
        // await db.rawUpdate('UPDATE $table SET name = ?, VALUE = ? WHERE name = ?',)
         await db.update(table, data,where: "user_id=$id");
      }
      /* 查询数据 */
      getdata({ num id})async{ 
        if(id!=null){ 
        return await db.query(table,where: "user_id=$id");
        }else{ 
          print(await db.query(table));
        return  await db.query(table);
        }
        
      }
    }

# flutter 弹窗函数 #

## showDialog ##

数据类型穿null就可以

### 确认框 ###

showDialog<AlertDialog>(
                context: context,
                useSafeArea: false,
                barrierDismissible: false,//是否开启点击蒙层关闭 false 关闭点击蒙层关闭
                builder: (BuildContext context) { 
                    return  AlertDialog(
                        content:  SingleChildScrollView(
                            child:  ListBody(
                                children: <Widget>[
                                     Text('内容 1'),
                                     Text('内容 2'),
                                ],
                            ),
                        ),
                        actions: <Widget>[
                             FlatButton(
                                child:  Text('确定'),
                                onPressed: () { 
                                  Navigator.of(context).pop();
                                },
                            ),
                        ],
                    );
                },  
            );

### 选择框 ###

showDialog<Null>(
                context: context,
                useSafeArea:false,
                builder: (BuildContext context) { 
                    return new SimpleDialog(
                        title: new Text('选择'),
                        children: <Widget>[
                            new SimpleDialogOption(
                                child: new Text('选项 1'),
                                onPressed: () { 
                                    Navigator.of(context).pop();
                                },
                            ),
                            new SimpleDialogOption(
                                child: new Text('选项 2'),
                            
                                onPressed: () { 
                                     Navigator.of(context).pop();
                                },
                            ),
                        ],
                    );
                },
            );

# 自定义图标 #

1.  去阿里适量图标库选择需要的图标，或者自己制作也可以
2.  放到自己项目里面跟目录或者lib目录都可以没什么要求
3.  路径要从根目录开始不加斜杠  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU_size_16_color_FFFFFF_t_70 1]
4.  引入后执行 命令 flutter pub upgrade 反正需要重新编译
5.  引入方式

Icon(
                      IconData(0xea0b,fontFamily: "myicon"),
                      size: 128,
                      color: Colors.blue,
                    )

# [安卓权限列表][Link 2] #

# flutter保存图片到手机 #

# flutter状态管理 #

官方包名 provide [地址][Link 3]  
个人案例地址

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU_size_16_color_FFFFFF_t_70]: /images/20221119/859cc9753dd241fca8dc98743d6b2ae8.png
[https_lbs.amap.com_api_flutter_summary]: https://lbs.amap.com/api/flutter/summary
[https_lbs.amap.com_api_flutter_guide_map-flutter-plug-in_map-flutter-info]: https://lbs.amap.com/api/flutter/guide/map-flutter-plug-in/map-flutter-info
[https_lbs.amap.com_dev_demo_flutter-loc_Android]: https://lbs.amap.com/dev/demo/flutter-loc#Android
[https_blog.csdn.net_BLUESKYHOST_article_details_113247059]: https://blog.csdn.net/BLUESKYHOST/article/details/113247059
[Link 1]: https://pub.flutter-io.cn/packages/flutter_screenutil
[https_github.com_flutterchina_json_model_blob_master_README-ZH.md]: https://github.com/flutterchina/json_model/blob/master/README-ZH.md
[20210128150922656.png]: /images/20221119/7d4b105c94c7461c974b70929621a43c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210130195802331.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU,size_16,color_FFFFFF,t_70
[Link 2]: https://blog.csdn.net/BLUESKYHOST/article/details/113478390
[Link 3]: https://pub.dev/packages/provider/example