This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

Flutter and RN

The reason why Flutter works on both Android and iOS is that both iOS and Android have Flutter’s rendering engine installed on them. RN is packaged on top of the native UI, so when Flutter’s native UI is updated, RN needs to update it for compatibility. And RN makes Android display Android controls and iOS display iOS controls, so it’s not a UI. Flutter installs the rendering engine on your phone. The resulting package for Flutter is large because it contains the rendering engine, but it has the advantage of being efficient and not relying on the native UI. The iOS and Android pages are highly unified.

Flutter page

Based on the page

Development pages need to import UIKit in ios development, so there is a similar library in Flutter called Material.

import 'package:flutter/material.dart;
Copy the code

In ios development, you need to develop the view in the Window, while in Flutter you need to pass in a widget by executing a function runApp. Child here is equivalent to subview.

Center is underlined. Because this is a static interface that doesn’t change, it warns you to add const as a constant. Flutter rendering is incremental. In ios, it monitors the properties of the page, and if any of them change, it rerenders them. In Flutter, an entire interface will be re-rendered. Any interface that changes will be re-rendered without observing the properties.

The custom widget

Widgets are mainly divided into two categories, one is StatelessWidget and the other is StatelessWidget. As the name implies, the stateless cannot change, while the stateful has internal widgets that can change its state. In essence, Flutter is stateless. It is stateful because by defining many functions, it is easy for developers to develop and become stateful. The build method must be implemented here to render.

import 'package:flutter/material.dart'; void main() { runApp( const Center( child:MyWidget(), ) ); } class MyWidget extends StatelessWidget { const MyWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const Center( child:Text( 'hello Flutter', textDirection: TextDirection.ltr, ), ); }}Copy the code

The components in Flutter are created for immediate use. When properties change, a new interface is created. The old interface is discarded without the concept of reuse. Here we add style for Text. As you can see, all of this is created using the constructor, if it is assigned it will be generated using that value, if it is not assigned it will be default or not processed.

class MyWidget extends StatelessWidget { const MyWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const Center( child:Text( 'hello Flutter', textDirection: LTR, style: TextStyle(fontSize: 40.0, fontWeight: fontweight.bold, color: color.red,),); }}Copy the code

MaterialApp & Scaffold

Normally we use the MaterialApp to initialize the page and the Scaffold to build the page. So AppBar equals Navigation title,

class App extends StatelessWidget { const App({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title:const Text( "Flutter demo" ), ), body: const MyWidget(), ), ); }}Copy the code

That’s what it looks like when it runs.

ListView

Start by creating a new file and creating a model:


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

Let me modify the structure

class App extends StatelessWidget { const App({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Home(), ); } } class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text( "Flutter demo" ), ), body: MyWidget(), ); }}Copy the code

So let’s write the ListView. Here we need two parameters, an itemBuilder and an itemCount. The itemBuilder is a callback function that returns the Widget and takes two parameters, context and index, just like the cellForRow method

Here we create a method to use as a parameter.

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

After running, we get:

Modify:

class Home extends StatelessWidget {

  Widget _itemForRow(BuildContext context, int index) {
    return Container(
      color: Colors.white,
      margin:EdgeInsets.all(10),
      child: Column(
        children: [

            Image.network(datas[index].imageUrl ?? ""),
            SizedBox(height: 10,),
            Text(datas[index].name ?? ""),
        ],
      )
    );
  }
Copy the code