flutter基础教程(helloword，image，widget)

分享几个学习flutter的学习网站与资源

flutter实战第二版https://book.flutterchina.club/chapter6/gridview.html#_6-6-1-%E9%BB%98%E8%AE%A4%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0

flutter中文文档https://flutter.cn/docs/get-started/flutter-for/web-devs

程序入门当然是打印helloword了，运行即可

helloWord.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new MaterialApp(
      title: 'welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: Text('wecome'),
        )
        body: Center(
          child: new Text('hello')
        )
      )
    )
  }
}

flutter中使用图片

main_image.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new MaterialApp(
      title: 'welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: Text('wecome'),
        )
        body: Center(
          child: Container(
            child:new Image.network(
              'xxxxx',
              fix:boxFit.container,
            )
            width:300.0,
            height:200.0,
            color:Colors.lightBlue,
          )
        )
      )
    )
  }
}

flutter使用widget组件

main_widget.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new MaterialApp(
      title: 'welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: Text('wecome'),
        )
        body: Center(
          child: Container(
            child: new Text('hello han',style:TextStyle(fontSize:40.0)),
            alignment: Alignment.topLeft,
            width:500.0,
            height:400.0,
            padding:const EdgInsets.fromLTRB(10.0,100.0,0.0,0.0),
            margin: const EgdInsets.all(10.0),
            decoration: new BoxDecoration(
              border:Border.all(width:2.0,color:Colors.red)
            )
          )
        )
      )
    )
  }
}