第一次学习flutter
搜索flutter进入flutter的官网,选择你的操作系统,进入flutter官网.
我的是windows的操作系统 首先安装flutter,再次安装android studio,我在配置模拟器的时候出现了显卡的问题,笔记本电脑一般不会出现这种问题。其次出现了Error connecting to the service protocol: HttpException: Connection closed before full header was received, uri = http://127.0.0.1:63924/UtlsijZOsPU=/ws 这个是由于安卓版本太高的原因,把版本改为8.1的就可以了,还有一个终极大招就是用真机测试,不用这么麻烦了。
最后选择的编辑器是vscode,下载一个flutter的插件,然后运行flutter run ,由于我的是真机测试的,首先要先看下链接的手机版本flutter devices,之后再flutter run就可以在手机上运行起来了
用flutter写一个Hello World
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
//声明MyApp类
class MyApp extends StatelessWidget {
//重写build方法
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '欢迎使用flutter',
home: Scaffold(
appBar: AppBar(title: Text('welcome to flutter')),
body: Center(
child: Text('Hello World'),
)),
);
}
}
使用Text
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
//声明MyApp类
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '欢迎使用flutter',
home: Scaffold(
appBar: AppBar(title: Text('welcome to flutter')),
body: Center(
child: Text(
'大家好,这是我第一次学习flutter,感觉挺不错的,希望可以坚持下去', //文字的显示
textAlign: TextAlign.center, //文字对齐方式
maxLines: 1, //显示的行数
overflow: TextOverflow.ellipsis, //ellipsis 以...的形式
style: TextStyle(
fontSize: 22.0, //文字的大小
color: Color.fromARGB(255, 255, 125, 125), //文字的颜色
decoration: TextDecoration.underline, //下划线
decorationStyle: TextDecorationStyle.dotted //下划线的样式
),
),
)),
);
}
}
使用Container
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
//声明MyApp类
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '欢迎使用flutter',
home: Scaffold(
appBar: AppBar(title: Text('welcome to flutter')),
body: Center(
child: Container(
child: new Text(
'Hello LiFeng',
style: TextStyle(
fontSize: 40.0,
color: Color.fromARGB(255, 255, 125, 125),
),
),
//alignment: Alignment.center, //对齐方式
width: 500.0,
height: 300.0,
color: Colors.lightBlue, //颜色
padding: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 20.0),
margin: const EdgeInsets.all(10.0),
//在使用decoration的时候要把color注释掉 会有报错
decoration: new BoxDecoration(
gradient: const LinearGradient(colors: [
Colors.lightBlue,
Colors.greenAccent,
Colors.purple
]),
border: Border.all(width: 5.0, color: Colors.red)),
),
)),
);
}
}
使用Image
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
//声明MyApp类
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '欢迎使用flutter',
home: Scaffold(
appBar: AppBar(title: Text('welcome to flutter')),
body: Center(
child: Container(
child: new Image.network(
'http://blogimages.jspang.com/blogtouxiang1.jpg',
// fit: BoxFit.cover, //控制图片的拉伸和挤压
// color: Colors.lightBlue, //是要混合的颜色,如果你只设置color是没有意义的
// colorBlendMode: BlendMode.darken, //是混合模式,相当于我们如何混合
repeat: ImageRepeat.repeat, //图片的重复
),
width: 300.0,
height: 200.0,
color: Colors.lightBlue,
),
)),
);
}
}