flutter开发解决方案

最新推荐文章于 2025-03-05 18:18:53 发布

BLUESKYHOST

最新推荐文章于 2025-03-05 18:18:53 发布

阅读量303

点赞数

分类专栏： Flutter 文章标签： flutter 前端

本文链接：https://blog.youkuaiyun.com/BLUESKYHOST/article/details/113030816

版权

Flutter 专栏收录该内容

8 篇文章

订阅专栏

环境配置

建议使用java8
andorid sdk 选中对号 apply

设置主题

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 部件内部配置这个是页面盒子页面相关的都在这里配置
宽度在外面套容器部件即可

drawer 左面抽屉
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/guide/map-flutter-plug-in/map-flutter-info
高德定位文档 https://lbs.amap.com/dev/demo/flutter-loc#Android

高德地图使用教程

https://blog.youkuaiyun.com/BLUESKYHOST/article/details/113247059

单位尺寸处理方案

flutter_screenutil 插件目前最好的适配插件地址
有中文文档

分离视图与数据

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

注意细节

在项目最外层创建jsons的文件夹
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();
                            },
                        ),
                    ],
                );
            },
        );

自定义图标

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

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

安卓权限列表

flutter保存图片到手机

flutter状态管理

官方包名 provide 地址
个人案例地址