The problem

  1. Container match_parent cannot be used. See Flutter_slide_move
  2. If the wrap is invalid, see Flutter_search_site common_view.dart
  3. Windows 10 Android Studio doesn’t connect to iPhone
  4. Solve github.com/flutter/flu… Behavior: hittestBehavior. opaque, GestureDetector PADDING Hit invalid height Valid see Flutter_search_site _topBar
  5. The position is invalid _DesignHomeSceneState
  6. An error occurs when the ios server runs, which may be caused by the call written by the user but not written by the ios server. Run bian on both sides of the platform to third parties and all your own writing to native

An error

Android dependency ‘androidx. Versionedparcelable: versionedparcelable’ from the company’s version for the compile and (1.0.0) Runtime (1.1-RC01) classpath. You should manually set the same version via DependencyResolution Stackoverflow.com/questions/5…

specification

1. Methods are private preceded by an _, so that the method is grayed out if it is not used. Anything without _ is yellow. (Not as intelligent as Java)

2. Add a TAB name at the top of the comment. It doesn’t have a preview view like Android XML

The url

Constants (final and const) final and const difference blog.csdn.net/hxl51711627…

Flutter command www.cnblogs.com/cag2050/p/1… Switch the Flutter SDK to the stable flutter Channel stable

Based the dart dart. Dev/guides/lang… Pub package pub. Flutter – IO. Cn /

Apple pod repo slow download library update mirror.tuna.tsinghua.edu.cn/help/CocoaP…

Automatically assigning platform Podfile # platform :ios, ‘9.0’ (去了#号)

The HTTP protocol

<application … android:usesCleartextTraffic=”true” … >

packaging

Flutterchina. Club/android – rel…

Close the page refresh superview

Close the child page, and the parent page calls Build

Function defaults

TextStyle defaultTextStyle({color = SQColor.darkGray}) {
    return TextStyle(
        fontSize: 15,
        color: color,
        decorationColor: SQColor.white,
        fontWeight: FontWeight.normal);
  }
Copy the code

Delay to suspend

await Future.delayed(const Duration(milliseconds: 100), () {});

Copy the code

List

map

Return a new list

List<Widget> categoriesText = categories.map((f) {
      returncategoryText(f.title); }).toList(); Widget categoryText(String title, type error) widget categoryText(String title, type error) {TextStyle textStyle}) {return Container(
      alignment: AlignmentDirectional.bottomStart,
      padding: EdgeInsets.symmetric(horizontal: 8),
      child: Text(title, style: textStyle,),
    );
  }    
Copy the code

The view rotation

Juejin. Cn/post / 684490…

Popup window

void showCleanCacheDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (build) {
          returnCenter(child: dialogBody(), // Now the container width is valid); }); }Copy the code

layout

stack

Overlapping layout

text style

The style of the text is related to the Scaffold of the current page. The Scaffold is normal

Container

The height of the container on the outside of a page is match_parent, and in children the height is wrap_content

wrap_content match_parent

The default is match_parent

  1. ListView shrinkWrap: true
  2. Row mainAxisSize: MainAxisSize.min

Scroll wrap_content horizontally

 Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        new SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: new Row(
            children: <Widget>[
              Container(width: 300, height: 60, color: Colors.green,),
              Container(width: 300, height: 60, color: Colors.red,)
              // ...
            ],
          ),
        ),
      ],
    );
Copy the code

The list of

subjectColumnImage() { List images = data.subjects.map((f) => Column( children: <Widget>[ Padding( padding: Symmetric (vertical: 8.0) const EdgeInsets. Symmetric (vertical: 8.0), child: Image.network(F.Ic, height: 40, width: 40,),), style: TextStyle(fontSize: 11),) ], )).toList();returnCenter(child: Wrap(// listspacing: 40, children: images,); }Copy the code

Bottom navigation bar navigation

Result is shown in figure

Pit: put the image in the directory img/2.0x put, img/ did not put will not display

import 'package:flutter/material.dart';
import 'package:flutter_search_site/app/sq_color.dart';
import 'package:flutter_search_site/home/home_scene.dart';

class RootScene extends StatefulWidget {
  @override
  _RootSceneState createState() => _RootSceneState();
}

class _RootSceneState extends State<RootScene> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        children: <Widget>[
          HomeScene(),
          HomeScene(),
          HomeScene(),
          HomeScene(),
        ],
        index: _currentIndex,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: bottomImage('img/ic_b1.png'),
              activeIcon: bottomImage('img/ic_b1_click.png'),
              title: Text('Trend Search')),
          BottomNavigationBarItem(
              icon: bottomImage('img/ic_b2.png'),
              activeIcon: bottomImage('img/ic_b2_click.png'),
              title: Text(Home of Designers)),
          BottomNavigationBarItem(
              icon: bottomImage('img/ic_b3.png'),
              activeIcon: bottomImage('img/ic_b3_click.png'),
              title: Text('I')),
          BottomNavigationBarItem(
              icon: bottomImage('img/ic_b4.png'),
              activeIcon: bottomImage('img/ic_b4_click.png'),
              title: Text(
                'Contact us',], currentIndex: _currentIndex, onTap: (int index) {setState(() {
            _currentIndex = index;
          });
        },
        type: BottomNavigationBarType fixed, selectedFontSize: 12, unselectedItemColor: SQColor. Gray, / / not selected text color selectedItemColor: Sqcolor. darkGray, // Select text color),); } bottomImage(String imgSrc) {returnPadding( padding: EdgeInsets.only(bottom: 4), child: Image.asset(imgSrc, width: 24, height: 24), ); }}Copy the code

Page to page jump

class VideoPlayScene extends StatefulWidget { final String url; VideoPlayScene(this.url); Static push(BuildContext Context, String URL){Navigator. Push (context, MaterialPageRoute(Builder: (context) {return VideoPlayScene(url);
    }));   
  }
  
  @override
  _VideoPlaySceneState createState() => _VideoPlaySceneState();
}
Copy the code

Close the page

Navigator.pop(context);
Copy the code

The status bar statusBar

statusBar() {SystemUiOverlayStyle SystemUiOverlayStyle = SystemUiOverlayStyle(// set the status bar background color transparent statusBarColor: Color. Transparent, // Set the status bar icon to black. SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); }Copy the code

Text rounded background

searchView() {
    returnContainer( margin: EdgeInsets.only(left: 16, right: 16), decoration: BoxDecoration( borderRadius: BorderRadius. Circular (32), // The size of the arc color: sqcolor. lightGray, // the color of the arc), height: 32, Child: FlatButton(onPressed: search, child: Text('Search for "street photos" keywords',
          style: TextStyle(fontSize: 12, color: SQColor.gray),
        ),
      ),
    );
  }
Copy the code

Arc line

Container(decoration: BoxDecoration(border: border. All (color: SQColor. DarkGray, width: 0.5), borderRadius: BorderRadius.circular(20) ), padding: EdgeInsets.fromLTRB(10, 4, 8, 6), child: Row( children: <Widget>[ Image.asset('img/ic_thumb.png'),
              Text("Praise${data.praiseNum}")],),)Copy the code

The picture

Loading network images

Image.network(url, fit: BoxFit.cover,)
Copy the code

Caching network images

Cached_network_image: ^ 0.8.0

return Image(
        image: CachedNetworkImageProvider(images[0]),
        width: 300,
        fit: BoxFit.cover,
      );
Copy the code

Round – corner image in rotation diagram

Carousel_slider: ^ 1.3.0

returnSymmetric (vertical: 8) child: CarouselSlider(viewportFraction: 1.0, aspectRatio: 328/200, // Specify high, invalid autoPlayInterval: Duration(seconds: 5), autoPlay:true,
        items: lamps.map((info) {
          return Builder(
            builder: (BuildContext context) {
              returnBorderRadius: borderRadius. Circular (32), // the size of the arc color: DecorationImage(fit: boxfit.cover, image: NetworkImage(info.pic ==""? info.videoPic : info.pic),) ), ); }); }).toList(), ), );Copy the code

Mix pictures and text

searchView() {
    returnContainer( margin: EdgeInsets.only(left: 16, right: 16), decoration: BoxDecoration( borderRadius: BorderRadius. Circular (32), // Set the size of the arc to sqcolor. lightGray, // Set the size of the arc to 32, // Set the size of the child: Row (mainAxisAlignment: mainAxisAlignment spaceEvenly, / / clearance style children: < widgets > [FlatButton (onPressed: search, child: Text('Search for "street photos" keywords', // The size of the text to control the space between the Image and the Image. Style: TextStyle(fontSize: 12, color: sqcolor.gray),),), image.asset ('img/ic_search.png'// picture],)); }Copy the code

The divider

Divider(height: 16,)
Copy the code

Network request

Javiercbk.github. IO /json_to_dar… {img SRC = “img SRC = “” > “” img SRC = “” >

“Video_url “:null, the type to determine,dart null is the object

if (json['video_url'] is String) {
      videoUrl = json['video_url'];
    }
Copy the code

The list of

Vertical lists nest horizontal lists

In a listView

shrinkWrap: true, / / solve the problem of infinite high physics: NeverScrollableScrollPhysics (), / / disable sliding eventCopy the code
listViewHorizontalView() {// A child in the vertical listreturnContainer(margin: EdgeInsets. Symmetric (vertical: 20.0), height: 200.0, // The height must be specified. ScrollDirection: Axis. Horizontal, children: <Widget>[Container(width: width) Color: color.red,), Container(width: 160.0, color: color.blue,), Container(width: 160.0, color: color.blue,), Container(width: 160.0, color: color.blue,) Color.green,), Container(width: 160.0, color: color.yellow,), Container(width: 160.0, color: color.yellow,), Container(width: 160.0, color: Colors.orange, ), ], ), ); }Copy the code

The progress bar slider

returnContainer(child: Slider(value: progressValue, onChanged: (double value) {// While slidingsetState(() { progressValue = value; }); }, onChangeEnd: (double value) {// slide stop}, activeColor: sqcolor. primary, // inactiveColor: sqcolor.gray,);Copy the code

Overlapping position layout

The text folds over the dot picture

hotspotLeftText() {
    returnStack(children: <Widget>[c-scroll (left: 12, top: 8, child: Opacity(Opacity: 0.8, child: Image.'img/ic_red_point.png')),
          ),
          Container(
            child: Text(
              "Hot \n Picks",
              style: TextStyle(fontStyle: FontStyle.italic),
            ),
          ),
        ],
      );
  }
Copy the code

Mixed development

static const platform = const MethodChannel('android_log'); InvokeMethod source code has demo including Android and iOSlogD(dynamic data) => platform.invokeMethod('logD', {"msg": data});
Copy the code