Flutter learning notes (I) Muke technology fat teacher’s lecture notes

Time:2021-9-26

2-5 write a HelloWorld program

Fluent upgrade: run fluent upgrade in the CMD console to upgrade the fluent SDK
Fluent doctor view the version of the fluent SDK
Shortcut keys in fluent
r: Click hot load to view the preview effect directly
p: Display grid in virtual machine
o: Switch preview mode for Android and IOS
q: Exit debug preview mode

//The flat style launched by Google is atmospheric and beautiful
import 'package:flutter/material.dart';
//Entry file
void main() => runApp(MyApp());
//Define myapp function to inherit static components
class MyApp extends StatelessWidget {
//Rewrite build method
  @override
//Returns a component and passes a context
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "welcome to flutter",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Hello Worldtitle"),
        ),
        body: new Center(
          child: new Text("Hello Worldbody"),
        ),
      ),
    );
  }
}

Section 3-1 textwidget text component

import 'package:flutter/material.dart';

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

//Static build
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(
        appBar: AppBar(title: Text('TextWidget')),
        body: Center(
            child: Text(
          'flutter, everything is a component. Flutter everything is a component. Flutter everything is a component. Flutter everything is a component. Flutter, everything is a component. ',
//Align left right start end in the center (the latter two works are not commonly used, and the operation effect is similar to that of left right)
          textAlign: TextAlign.center,
//Maximum number of rows
          maxLines: 1,
//The default value is to truncate the text directly
//              overflow: TextOverflow.clip,
//Beyond the ellipsis fade, it is not commonly used to fade the color transparency line by line
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
              fontSize: 25.0,
              color: Color.fromARGB(255, 255, 150, 150),
//Underline solid line
              decorationStyle: TextDecorationStyle.solid,
              decoration: TextDecoration.underline),
        )),
      ),
    );
  }
}

Section 3-2 containerwidget container Assembly-1

import 'package:flutter/material.dart';

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

//Static build
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(
        appBar: AppBar(title: Text('TextWidget')),
        body: Center(
            child: Container(
          child: new Text(
            'Hello Imooc',
            style: TextStyle(fontSize: 40.0),
          ),
//Align the bottom to the left. The first value is vertical and the second value is horizontal
//          alignment: Alignment.bottomLeft,
          //Vertically centered and horizontally aligned to the left
          alignment: Alignment.centerLeft,
//Width height color
          width: 500.0,
          height: 400.0,
          color: Colors.lightBlue,
        )),
      ),
    );
  }
}

Section 3-3 containerwidget container assembly-2

import 'package:flutter/material.dart';

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

//Static build
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(
        appBar: AppBar(title: Text('TextWidget')),
        body: Center(
            child: Container(
          child: new Text(
            'Hello Imooc',
            style: TextStyle(fontSize: 40.0),
          ),
          alignment: Alignment.bottomLeft,
          width: 500.0,
          height: 400.0,

//Inner margin 20
//              padding:const EdgeInsets.all(20.0),
//Set up, down, left and right margins respectively
          padding: const EdgeInsets.fromLTRB(10.0, 0, 0, 59.0),
//Outer margin
          margin: const EdgeInsets.all(10.0),
          decoration: new BoxDecoration(
            gradient: const LinearGradient(
                colors: [Colors.lightGreen, Colors.purple, Colors.amber]),
          ),
        )),
      ),
    );
  }
}