flutter(1)

终于到flutter了 flutter也是满满的坑…
看了网上的一堆教程看不懂一点,因为对里面的东西没有概念,所以我还是决定自己写一下
还是先写点基础知识吧,正好我自己也了解一下:
flutter的设计理念
Flutter的设计理念是“一切皆为Widget”。这意味着不论是按钮、字体、颜色、布局，甚至是你的整个应用程序，都是由一个个Widget组合而成。在Flutter中，Widget可以嵌套、包裹或组合在一起，形成复杂的UI组件，这给了开发者极大的灵活性和创造力。
Widget
Flutter中的Widget即是声明UI的视图，也是视图和界面变化的桥梁。一个Widget可以定义：
一个结构元素（如按钮或菜单）
一个样式元素（如字体或颜色模式）
甚至是布局方面的元素（如填充或对齐方式）
在Flutter中，Widget的主要任务是提供一个build()方法，用于描述在UI中所看到的内容。
StatelessWidget和StatefulWidget
StatelessWidget和StatefulWidget是Flutter开发必不可少的。两者的区别在于state。有状态的widget需要继承StatefulWidget,无状态的需要继承StatelessWidget。
StatelessWidget是Flutter中的一个基础类，用于构建不可变的用户界面。这意味着一旦创建，StatelessWidget的状态就不会再改变。通常，StatelessWidget用于展示静态内容，如显示文本、图像或图标。
与StatelessWidget不同，StatefulWidget是一个有状态的小部件，其状态可以在运行时发生变化。这使得StatefulWidget非常适用于需要动态更新的用户界面，如用户输入、网络请求等。
一个简单的StatelessWidget
import ‘package:flutter/material.dart’;

class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Text(‘Hello, Flutter!’),
);
}
}

void main() {
runApp(MyApp());
}
一个简单的StatefulWidget
import ‘package:flutter/material.dart’;

class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘StatefulWidget Example’),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(‘Counter: $_counter’),
RaisedButton(
onPressed: _incrementCounter,
child: Text(‘Increment’),
),
],
),
),
);
}
}

void main() {
runApp(MyApp());
}
哈哈哈这些都是我复制的,后面再慢慢搞懂里面的含义
Flutter程序结构
一个基本的Flutter程序通常包括以下部分：
main函数：应用的入口点。
MyApp类：StatelessWidget，返回一个包含应用主题、路由和主页的MaterialApp Widget。
主页类：可为StatelessWidget或StatefulWidget，包含应用主体部分。
其他Widget类：你自定义的Widget，可被主页类或其他Widget类使用。
基础的Widget
Text
这个widget用于显示简单的样式文本，它包含一些控制文本显示样式的属性
Text(
‘Hello, World!’,
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
)
Image
Image.network(‘https://example.com/images/sample.jpg’)
Icon
Material Design的图标widget。
Icon(Icons.star, color: Colors.red[500])
Flutter的基本布局Widgets
在Flutter中，我们有许多预定义的布局Widget，例如Row、Column和Stack
Row和Column

Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.star, color: Colors.red[500]),
Icon(Icons.star, color: Colors.red[500]),
Icon(Icons.star, color: Colors.red[500]),
],
)
Stack
Stack是一个布局Widget，它可以将子Widget堆叠在一起。你可以使用Positioned widget来定位Stack中的子Widget。以下是一个简单的Stack示例：
Stack(
alignment: const Alignment(0.6, 0.6),
children: [
CircleAvatar(
backgroundImage: AssetImage(‘images/pic.jpg’),
radius: 100.0,
),
Container(
decoration: BoxDecoration(
color: Colors.black45,
),
child: Text(
‘Hello World’,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
)
大概写这么多吧,感觉多理解了一点点 后面再写一篇解读默认首页的文章