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:
预览效果
感慨一下:
今天的发表到这里吧,关键坚持😁😁😁😁