flutter基础知识讲解（flutter无状态小部件教程）
flutter基础知识讲解（flutter无状态小部件教程）import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( home: MyApp() // Define the theme set the primary swatch theme: ThemeData(primarySwatch: Colors.green) )); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // Declare some constants final double myTextSize = 30.0; final double myIconSize = 40.
本头条核心宗旨欢迎来到「技术刚刚好」作者，「技术刚刚好」是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。
技术刚刚好经历近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！
本文核心要点使用无状态小部件我相信很多人都在使用，而且很多项目也在使用，今天就分享个大家。
DEMO
main.dart文件介绍
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: MyApp()
// Define the theme set the primary swatch
theme: ThemeData(primarySwatch: Colors.green)
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Declare some constants
final double myTextSize = 30.0;
final double myIconSize = 40.0;
final TextStyle myTextStyle =
TextStyle(color: Colors.grey fontSize: myTextSize);
var column = Column(
// Makes the cards stretch in horizontal axis
crossAxisAlignment: CrossAxisAlignment.stretch
children: <Widget>[
// Setup the card
MyCard(
// Setup the text
title: Text(
"favorite"
style: myTextStyle
)
// Setup the icon
icon:
Icon(Icons.favorite size: myIconSize color: Colors.red))
MyCard(
title: Text(
"Alarm"
style: myTextStyle
)
icon: Icon(Icons.alarm size: myIconSize color: Colors.blue))
MyCard(
title: Text(
"Airport Shuttle"
style: myTextStyle
)
icon: Icon(Icons.airport_shuttle
size: myIconSize color: Colors.amber))
MyCard(
title: Text(
"Done"
style: myTextStyle
)
icon: Icon(Icons.done size: myIconSize color: Colors.green))
]
);
return Scaffold(
appBar: AppBar(
title: Text("Stateless Widget")
)
body: Container(
// Sets the padding in the main container
padding: const EdgeInsets.only(bottom: 2.0)
child: Center(
child: SingleChildScrollView(child: column)
)
)
);
;
}
}
// Create a reusable stateless widget
class MyCard extends StatelessWidget {
final Widget icon;
final Widget title;
// Constructor. {} here denote that they are optional values i.e you can use as: MyCard()
MyCard({this.title this.icon});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.only(bottom: 1.0)
child: Card(
child: Container(
padding: const EdgeInsets.all(20.0)
child: Column(
children: <Widget>[this.title this.icon]
)
)
)
);
}
}
谢谢观看技术刚刚好的文章，技术刚刚好是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。
