Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

Plugin & Package

  • Package: a third-party framework in Dart that only contains Dart code
  • Plugin: contains android and iOS native code

Flutter & RN

  • Flutter: has its own rendering engine, does not rely on native UI, high efficiency, highly unified.
  • RN: Packaging based on a native UI that needs to be updated as soon as it is updated native.

Widget

Material. Dar is similar to UIKit in iOS. There is a concept of a component in Flutter (widget). The Center Text in the following code is inherited from the widget.

import 'package:flutter/material.dart'; 

void main() {
  runApp(
    Center(
      child: Text(
        'hello world',
        textDirection: TextDirection.ltr, // Read the direction, do not write, do not display
      ), // Construct Text
    )    // Center structure
  );
}
Copy the code

The custom Widget

  • statefulstateful: Can be changed
  • statelessstateless: Cannot be changed

To inherit a StatelessWidget, you must implement a method: Widget Build (BuildContext Context)

void main() {
  runApp(
    MyWidget());
}

// The above can be written as arrow functions
void main() => runApp(MyWidget());

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return Center(
        child: Text(
          'hello world', textDirection: TextDirection.ltr, ), ); }}Copy the code

Objects created in Flutter do not say that they are assigned to a pointer variable. They are usually constructed directly.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return Center(
        child: Text(
          'hello world', textDirection: TextDirection.ltr, style: TextStyle( color: Colors.yellow, fontWeight: FontWeight.bold, ), ), ); }}Copy the code

MaterialApp

Flutter provides a better encapsulated MaterialApp

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    returnMaterialApp( home: MyWidget(), ); }}class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return Center(
        child: Text(
          'hello world', textDirection: TextDirection.ltr, style: TextStyle( color: Colors.yellow, fontWeight: FontWeight.bold, ), ), ); }}Copy the code

Run after the emergence of a debug identifier, the structure of the open MaterialApp, found it has a default value of this. DebugShowCheckedModeBanner = true we modify it to false the logo was done not have.

Scaffold

The Scaffold is used with the MaterialApp in common development

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'flutterDemo'), ), body: MyWidget(), ) ); }}Copy the code

The text in MyWidget is centered relative to the Body.

� ​

The model object

Constructor parameters with {} are optional. See the widget construction in the documentation below

class Car {
  Car({this.name, this.imageUrl});
  final String? name;
  final String? imageUrl;
}

// Test data
final List<Car> datas = [
  const Car(
    name: Porsche 918 Spyder,
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-7d8be6ebc4c7c95b.png? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),const Car(
    name: 'Lamborghini Aventador',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-e3bfd824f30afaac? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),const Car(
    name: 'Ferrari Enzo',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-a1d64cf5da2d9d99? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),const Car(
    name: 'Zenvo ST1',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-bf883b46690f93ce? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),const Car(
    name: 'McLaren F1',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-5a7b5550a19b8342? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),const Car(
    name: 'Mr Sarin S7',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-2e128d18144ad5b8? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),const Car(
    name: 'Koenigsegg CCR',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-01ced8f6f95219ec? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),const Car(
    name: 'Bugatti Chiron',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-7fc8359eb61adac0? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),const Car(
    name: 'Venom GT',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-d332bf510d61bbc2.png? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),const Car(
    name: 'Sibel Tuatara',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-3dd9a70b25ae6bc9? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  )
];
Copy the code

ListView

Extract the scaffold with the body using ListView()

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    returnMaterialApp( home: Home(), ); }}class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(
              'flutterDemo'),),); }}Copy the code

Listview. builder(itemBuilder: ItemBuilder is a callback required IndexedWidgetBuilder itemBuilder, Typedef IndexedWidgetBuilder = Widget Function(BuildContext context, Int Index) this is the same as the cell in iOS that specifies each indexPath. So let’s implement a method like this

class Home extends StatelessWidget {
  Widget _itemForRow(BuildContext context, int index) {
    returnText(datas[index].name!) ; }@override
  Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(
              'flutterDemo'), ), body: ListView.builder( itemBuilder: _itemForRow, itemCount: datas.length, ), ); }}Copy the code

This section describes a Container component

  Widget _itemForRow(BuildContext context, int index) {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.all(10),
      child: Image.network(datas[index].imageUrl!),
    );
  }
Copy the code

Components can be arranged in only three ways: horizontal, vertical, and stacked.

However, only one child can be inside a Container, so we can use the arrangement of components for layout

  Widget _itemForRow(BuildContext context, int index) {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.all(10), child: Column( children: [ Image.network(datas[index].imageUrl!), Text(datas[index].name!) ] )); }Copy the code

It loads asynchronously because the text is displayed first and then the image resource comes back and updates the layout.

TIPS

  • This will lock up if AS rewinds hard. It’s going to be a bit of a problem when we open it again, so once it’s locked, we can come here/flutter/bin/cache/lockfileJust delete this
  • FlutterChinese website:Chinese website
  • Dart package: pub