The problem
- Container match_parent cannot be used. See Flutter_slide_move
- If the wrap is invalid, see Flutter_search_site common_view.dart
- Windows 10 Android Studio doesn’t connect to iPhone
- Solve github.com/flutter/flu… Behavior: hittestBehavior. opaque, GestureDetector PADDING Hit invalid height Valid see Flutter_search_site _topBar
- The position is invalid _DesignHomeSceneState
- 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
- ListView shrinkWrap: true
- 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