关于做flutter的项目总结

csdn博客文章 NO.1

---

个人介绍

今年19岁刚从黑马毕业，有幸在高中老师的推荐下来到一家互联网科技公司上班 ，从培训班出来总是抱有一腔的希望，认为美好的事物正在等待着自己。我学的是后端，但是我经手的第一个项目是做官网，发现学校的那点前端知识完全不够用了，只能现学现用。经过这次的项目之后，我发现在中国，尤其是身处知识红利时代的我们，学习成本是非常的低。能够在当下静下心来学习加以总结，也是对自身的一种要求。工作的不久后，公司没有一个合适的前端人员，我也就自告奋勇，愿意离开自己的舒适圈来历练自己，由于公司项目的需要，我最先学的就flutter。关于这篇文章，我也是做项目还没有完成时总结的，没有什么其他的目的，只是不想做一个不思进取之人。

提示：以下是本篇文章正文内容，下面案例可供参考

多了解第三方组件的有哪些

在做项目的过程中，没有必要所有的东西都去亲力亲为，个人的观点有以下几点，能开源出来的东西，说明已经非常的ok了，不是说学会了使用组件就可以应对所有问题了。在有空余的时间还是需要学习所以然，因为他会帮助你更好的掌握更好的运用 函数试使用（用的最多），经久不变 的代码示例尤为重要

• 使用第三方的组件，非常的方便能够大大的提升开发效率
• 第三方的功能非常的强大，面对实际开发只需要做个性化的设置
• 使代码没有那么绕，那么臃肿。更加简介明了

我个人觉得用的到的一些第三方组件：

短信验证框:

  //短信验证框
  flutter_verification_box: ^1.0.4
  //get下来之后运行一下
   Container(
            padding: EdgeInsets.only(left: 15,right: 15),
            height: 50,
            child: VerificationBox(
              itemWidget:50,
              showCursor: true,
              cursorColor: Colors.lightBlue,
              focusBorderColor: Colors.lightBlue,
              textStyle: TextStyle(fontSize: 28,fontWeight: FontWeight.w600),
              onSubmitted: (code){
                print(code);
              },
            ),
          )

详情使用：https://pub.flutter-io.cn/packages/flutter_verification_box
预览效果
                 

谷歌新出的的状态管理provider（拿去运行一下，看跟之前flutter自动生成的Dome写法上有什么区别）:

 // ignore_for_file: public_member_api_docs, lines_longer_than_80_chars
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

/// This is a reimplementation of the default Flutter application using provider + [ChangeNotifier].

void main() {
  runApp(
    /// Providers are above [MyApp] instead of inside it, so that tests
    /// can use [MyApp] while mocking the providers
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Counter()),
      ],
      child: const MyApp(),
    ),
  );
}

/// Mix-in [DiagnosticableTreeMixin] to have access to [debugFillProperties] for the devtool
// ignore: prefer_mixin
class Counter with ChangeNotifier, DiagnosticableTreeMixin {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }

  /// Makes `Counter` readable inside the devtools by listing all of its properties
  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(IntProperty('count', count));
  }
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text('You have pushed the button this many times:'),

            /// Extracted as a separate widget for performance optimization.
            /// As a separate widget, it will rebuild independently from [MyHomePage].
            ///
            /// This is totally optional (and rarely needed).
            /// Similarly, we could also use [Consumer] or [Selector].
            Count(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        key: const Key('increment_floatingActionButton'),

        /// Calls `context.read` instead of `context.watch` so that it does not rebuild
        /// when [Counter] changes.
        onPressed: () => context.read<Counter>().increment(),
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class Count extends StatelessWidget {
  const Count({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(

        /// Calls `context.watch` to make [Count] rebuild when [Counter] changes.
        '${context.watch<Counter>().count}',
        key: const Key('counterState'),
        style: Theme.of(context).textTheme.headline4);
  }
}

详情使用: https://pub.flutter-io.cn/packages/provider
预览效果 ：主要时看代码的写法上的不同，以前我们写的非常的耦合，这种在StatelessWeiget也能渲染。这种平行化管理使得代码更加的明了简单，写个Dome体会一下😀

从手机中获取图片或者时拍照(在一些上传身份证件的场景用的非常的多):

  //get
  image_picker: ^0.7.4
  //从手机里面获取照片或者时拍照
  import 'dart:io';

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File _image;
  final picker = ImagePicker();

  Future getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.camera);
   
    //从照片中选择
    //final pickedFile = await picker.getImage(source: ImageSource.gallery);
    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print('No image selected.');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Picker Example'),
      ),
      body: Center(
        child: _image == null
            ? Text('No image selected.')
            : Image.file(_image),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getImage,
        tooltip: 'Pick Image',
        child: Icon(Icons.add_a_photo),
      ),
    );
  }
}

详情使用：https://pub.flutter-io.cn/packages/image_picker
预览效果：

轮播图:

  //轮播图
  flutter_swiper: ^1.1.6
  //get下来之后运行一下
 
import 'package:flutter/material.dart';

import 'package:flutter_swiper/flutter_swiper.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
    body:  new Swiper(
        itemBuilder: (BuildContext context,int index){
          return new Image.network("http://via.placeholder.com/350x150",fit: BoxFit.fill,);
        },
        itemCount: 3,
        pagination: new SwiperPagination(),
        control: new SwiperControl(),
      ),
    );
  }
}

详情使用：https://pub.flutter-io.cn/packages/flutter_verification_box
预览效果: 搞个Dome试试吧！😘

JsonToDart 将json转为module:

预览效果

感慨一下:

   今天的发表到这里吧，关键坚持😁😁😁😁