The opening
Hello everyone, I am a 1 year practice Flutter trainee, slag method, like to write bugs, chicken soup, when eating.
It has been a year since I entered the pit of Flutter. Now the whole family of Flutter bucket has grown from one person to eight people and nearly 30 projects. We have gained a lot.
Flutter Candies 
gratitude
-
It’s been a year since I joined the nuggets and pit Flutter. Thank you. Pure technology platform, let the program ape all get together, learn from each other, progress together. Call it simple, but it is not so serious, there are various sections (blind date, fish, translation, etc.), I now use it as a friend circle, @all, did you receive my chicken soup today?
-
Thank you hug the thighs (most are cat head, is not a coincidence), Vadaski, JarvanMo, Debuggerx, love cat De Guo, Wendux, low-key, ramen and so on. Thank you for your help, which is what Flutter Candies was created to do, and hopefully help others to contribute to the Flutter community in a small way. You learn from the big guy, you can tell others, and they can pass it on to others, and the community will be better and better.
Flutter candie’s introduction
This bucket is a collection of the components/plugins that are commonly used in the development of Flutter, 🍬, so that you can easily integrate them into your own project. Below I will describe the various projects of The Flutter Candies according to the author. It’s going to be a little long, so get your melon seed soda ready and sit down and drive, drip, drip, drip.
AlexV525
From the beginning of the demand in the group, to be able to solve problems in the group; From a student majoring in fish farming to a job at Flutter. Since April, I have seen his change and the significance of 🍬 organization. He went into the pit and lived on Github.
OpenJMU campus application
It is a beautiful campus App with a high degree of completion and complete functions. However, it is impossible to log in due to the problem of account permission. If you see a feature, you can look for the code that implements it. If you can’t find it, you can ask in the group.
 |
 |
 |
|---|---|---|
 |
 |
 |
 |
 |
 |
Making project
The project code continues to be updated from 0, and interested lads can follow the address of the article and write the project from 0.
Ripple spread Gaussian Blur animation
Ripple diffuses, and take Gauss fuzzy, button to dance effect, like SAO children’s shoes can collect. Nugget article address
CrazyQ1
Author of the Flutter Tutorial website, an aggregator of all aspects of Flutter information.
Flutter WeChat version
From 0 to build the wechat version of the Flutter actual combat project, the project function code continues to be updated, interested guys can follow him and related articles
 |
 |
 |
|---|---|---|
 |
 |
 |
 |
 |
 |
Enchanted wax gourd
I am a responsible developer who has just entered the bucket. I will continue to optimize my projects to the best of my ability
Custom calendar components
The main function
- Support Gregorian calendar, lunar calendar, solar terms, traditional festivals, common holidays
- Date range. The default maximum date range is 1971.01 to 2055.12
- Disable date range Settings, such as to achieve a range of dates can click, outside the range of dates to ash
- Supports single and multiple selection modes, and provides callback when the number of multiple selections exceeds the limit and callback when the number of multiple selections exceeds the specified range.
- Jump to the specified date, default support animation switch
- Custom calendar Item with support for combining widgets and drawing using Canvas
- Customize the top WeekBar
- Depending on the actual scenario, you can add custom additional data to the Item to achieve various additional functions. For example, the implementation of progress bar style calendar, calendar to achieve a variety of markers
- Support week view display
- Supports the linkage between displaying and switching the month and week views
 |
 |
 |
|---|---|---|
 |
 |
 |
 |
 |
|
 |
 |
Like the small partner to collect up the gold article address
Flutter notes
The author of the Flutter notes, little Flutter expert, welcome to follow the wechat public account
Netease Cloud Music with the Flutter version
 |
 |
 |
|---|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
One way to learn the Flutter is to do it on top of the Existing App. This is a netease cloud music built from 0. You can follow the author’s ideas step by step to complete a complete project with Flutter. The interface is very comfortable, the function continues to be updated, everyone is quick to collect it
Long press wechat popup menu
At present, the best use of imitation wechat chat long press the pop-up box, like wechat style friends remember to collect up the address of the article
caijinglong
Low-key, fellow, can not eat spicy Sichuan people (snigger. GIF), anyway, it is very cow force. He’s going to play with anything new. I stepped on the hole he had filled in, and on the way of the Flutter I never came back. Pub 25. Terrible.. All high scores
flutter_image_editor
Flutter_image_editor is a native plug-in for Extended_Image, which supports rotation, cropping and rotation. Extended_image is responsible for the image editing UI, and Flutter_image_Editor provides the ability to native crop image data. Because of the dart image library’s efficiency in processing images, the native library (expect a pure C++ library) has a big advantage (large images can be up to 10 times faster). It is because of Teamwork that the picture editing and processing on flutter can finally reach a perfect state.
Method of space
Fa fa, 200, Flutter Candies 🍬 After feeling the influence of the big guys, I also hope to help more developers of Flutter. Currently, there are 13 pubs, which are commonly used components in projects.
extended_nested_scroll_view
The first problem I encountered in the project was the official NestedScrollView. After verification and review of the source code, it was found that it should only be as Design. If you are going to use the official NestedScrollView, it is highly recommended that you take a look at it first, as you are sure to encounter the following problems
Question 1.NestedScrollView’s Header has locked (Pinned=true) Sliver component, which causes the body to scroll
In fact, there is official processing on this, which is to wrap the SliverAppbar by SliverOverlapAbsorber. The code does not go on, in fact, it is in the comments of NestedScrollView.
However, what should we do if there are multiple pinned slivers in the header? I extended the official component for this. You can solve this problem, by setting pinnedHeaderSliverHeightBuilder callbacks in the code below, pinnedHeaderHeight is SliverAppbar height = the status bar height after the last fold + navigation bar height. If you have other locked slivers in the header, you can add their heights.
var pinnedHeaderHeight =
//statusBar height
statusBarHeight +
//pinned SliverAppBar height in header
kToolbarHeight;
return NestedScrollView(
pinnedHeaderSliverHeightBuilder: () {
return pinnedHeaderHeight;
},
Copy the codeQuestion 2.The list in the TabView in the body of the NestedScrollView will scroll and synchronize with each other
Since there is a ScrollController inside the NestedScrollView, the ScrollPositions of the list in the TabView will attach to this SC, and all ScrollPositions will be synchronized while scrolling one of them. Because of the space, I put the previous article directly here.
Problem 3. Cannot set the ScrollController for the list in the body
Since the list in the body must share the same ScrollController, you cannot set a separate ScrollController for the list. If set, the inner outer_scroll_controller and inner_scroll_controller will not work together.
You want to use ScrollController for no more than three points.
1. Refresh from the drop-down list box. Demo has been provided
2. Load more. Demo has been provided
3. Control list scrolling, properties are exposed
Frequently Asked Questions
- The component name is the same as the official one, so when you use it, remember to block the official one (too bold).
import 'package:flutter/widgets.dart' hide NestedScrollView;
Copy the code- If you are not familiar with NestedScrollView, this advice should be used in Baidu first. After you are familiar with the official way of using it, you can look at the official unsolved problems.
extended_image
The best photo gallery on the Flutter (so no one hit me
The main function
- Cache Network images
- Loading status (loading, completed, failed)
- Drag and zoom the image
- Image editing (Crop, rotate, flip)
- Photo preview (same as wechat Nugget)
- Slide exit effect (same as wechat Nugget)
- Set rounded corners and borders
Frequently Asked Questions
- How can the load state be overridden
The design principle is that if you need to override a state, return the effect you want, otherwise return null. Here is an example of rewriting “loading”
ExtendedImage.network(
item.imageUrl,
loadStateChanged: (ExtendedImageState state) {
if (state.extendedImageLoadState == LoadState.loading) {
return Container();
}
return null; });Copy the codeLost a lot of people because the rewrite the completed status and the function of gestures and tailoring, so I added pletedWidget at ExtendedImageState.com. Here is an example of rewriting the Completed state without losing the clipping gesture capability.
ExtendedImage.network(
item.imageUrl,
loadStateChanged: (ExtendedImageState state) {
if (state.extendedImageLoadState == LoadState.completed) {
return Padding(
padding: EdgeInsets.all(10.0),
child: state.completedWidget,
);
}
return null; });Copy the code- Path_provider plug-in mixed development problem
Please check out the issue yourself
extended_image_library
The base library for Extended_Image. If you only need the network image caching functionality, you can refer to this library only
Image(
image: ExtendedNetworkImageProvider("", cache: true));Copy the codeextended_text
Rich Chinese characteristics powerful function of the rich text nugget article address
The main function
- Fast building rich text
- Support for selection (including WidgetSpan) and custom menus
- Support overflow text customization
- Support for custom backgrounds
Frequently Asked Questions
- The use of SpecialTextSpanBuilder
To quickly build rich text, such as ‘[love]’ into emoticon images, SpecialTextSpanBuilder is provided. Its principle is simple, it is according to your own rules, transform text into various InlineSapn (TextSpan ImageSpan, WidgetSpan).
Here the build method is used to push through the text, and the createSpecialText method is used to createSpecialText according to your own rules. Some users may find this too complicated, but I think of it this way so that you can define your own rules according to the needs of your business. Be patient with the demo and you can quickly customize your own rich text
abstract class SpecialTextSpanBuilder
{
TextSpan build(String data,
{TextStyle textStyle, SpecialTextGestureTapCallback onTap})
SpecialText createSpecialText(String flag,
{TextStyle textStyle, SpecialTextGestureTapCallback onTap, int index});
}
Copy the codeextended_text_field
The only input content supported on Flutters is the WidgetSpan input box nugget article address
The main function
- Fast building rich text
- Support for selection (including WidgetSpan) and custom menus
Copy nuggets push features like button
Copy nugget push features like button, with the number of rolling animation nugget article address
The drop-down refresh
The custom scrollView component, which can be used in any scrolling scene (including NestedScrollView), only provides the state of the scrollView, so you can maximize your own custom effects without being constrained by the component itself. You can build any effect you want, based on the state distance. The 4 effects in the demo are just examples, welcome to pr more interesting effects. Nugget article address
Frequently Asked Questions
- Cannot pull down to refresh without one screen
- Impact of the iOS Bouncing effect The drop-down list is refreshed
These two problems can be solve by setting the list of physics, I provided the AlwaysScrollableClampingScrollPhysics here.
///in case list is not full screen and remove ios Bouncing
class AlwaysScrollableClampingScrollPhysics extends ClampingScrollPhysics {
const AlwaysScrollableClampingScrollPhysics({ScrollPhysics parent})
: super(parent: parent);
@override
AlwaysScrollableClampingScrollPhysics applyTo(ScrollPhysics ancestor) {
return AlwaysScrollableClampingScrollPhysics(parent: buildParent(ancestor));
}
@override
bool shouldAcceptUserOffset(ScrollMetrics position) {
return true; }}Copy the codeExpand the list of
Support for special layouts, memory clearing, and tracking of Indexes changes in the visual area. For more details
Reclaim the image cache
collectGarbage: (List<int> indexes) {
///collectGarbage
indexes.forEach((index) {
final item = listSourceRepository[index];
if (item.hasImage) {
item.images.forEach((image) {
finalprovider = ExtendedNetworkImageProvider( image.imageUrl, ); provider.evict(); }); }}); },Copy the code
 |
 |
 |
|---|
The waterfall flow
High performance waterfall flow layout, like waterfall flow friends quickly collect up.
 |
 |
|---|
List loading more
More ideas inherit from UWP. The work perfectly links the UI to the data source contract. Once you’ve written it, you’ll love it. Nugget article address
extended_tabs
Support TabBarView linkage, that is, two TabBarView can not slide, can slide to see a sliding level, can slide on the sliding level of the mining article address
Routing annotations
Lightweight and flexible route annotation tool, one line command to complete route mapping. Nugget article address
Json transforms Dart entity class tools
Json conversion dart entity class tool built with the Flutter and C#, provides a super variety of platform options, an atmosphere UI (chuck.gif
| platform | language | describe | Code/installation package address |
|---|---|---|---|
| windows | C# | Uwp build, run environment windows10, x86/x64 | windows-uwp.zip |
| windows | C# | WPF build, runtime environment Windows 10 / Windows/widnows7, x86 / x64 | windows-wpf.zip |
| windows | dart | Flutter build, useThe official wayCompile, X64,debug version | windows-x64-flutter.zip |
| windows | dart | Flutter build, usego-flutterCompile, X64,debug version | windows-x64-go-flutter.zip |
| mac | dart | Flutter build, usego-flutterCompile (official, no artifact found) | mac-go-flutter.zip |
| web | C# | silverlightBuild, requires silverlight plug-in installation, has browser restrictions | The web addressandFile web address with font |
| web | dart | flutter-webbuild | The web address |
| linux | dart | The flutter is built and compiled in official mode (no environment test, pretend to work). | The code address |
Common Problems with Flutter
Where do YOU get the Flutter
The official Website of Flutter China, the official Website of Flutter, has all kinds of resources, from introductory to in-depth. If you’re getting started with Flutter, this should be a must-see site.
MOE asks questions
Everyone comes from the new, and if you want to write code, you have to solve your own problems
-
English is very important.
-
Google and SO can solve most of your problems
-
When you ask a question, try to put code in it, or state your intentions, because you may be thinking about it or going in the wrong direction
-
If you can’t solve the problem by yourself, you can ask the boss for help, but please pay attention to the way of questioning, after all, good communication can save time for both sides, the boss also has to work and eat.
How to find plugins
You want the effect of the plug-in name or other platform components called what name, into English, to the pub search, high use of people, relatively stable and better.
Android is slow to download all kinds of things
We often run other components of the time, find all kinds of download failure, all kinds of download slow please use domestic mirror, fly general quickly.
- Replace Google () and jCenter ()
google()
jcenter()
Replace with the following
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
- Replace the grade download address with the image below
# distributionUrl=https\://services.gradle.org/distributions/gradle-5.1.1-all.zip
# CSDN mirror
distributionUrl=https\://downloads.gradle-dn.com/distributions/gradle-5.1.1-all.zip
Copy the codeWhy setting Size has no effect
During development, we found that sizing components had no effect. For example, in leading/ Actions of the Appbar, it is not possible to set the width and height directly. We need to use UnconstrainedBox to remove the child size limit of the parent widget, as shown below
AppBar(
title: Text(widget.title),
leading: UnconstrainedBox(
child: Container(
width: 50.0,
height: 10.0,
color: Colors.red,
),
),
),
Copy the codeWhen the keyboard pops up, how do you put the layout on top without covering the layout
- Get the height of the keyboard with the following code (trust that the build will be triggered when the keyboard pops up or collapses)
double keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
Copy the code- And then your layout will look something like this
Column(
children: <Widget>[
/// Your layout
Expanded(
child: Container(),
),
/// Top up your layout
Container(
height: keyboardHeight,
)
],
);
Copy the codeThat’s what I’ve seen in the scaffold. Dart. That’s important
The key code
pub.devSlow, you can’t open it? !
What are you waiting for, learn
Set hintText after internationalization, the cursor position is inconsistent
The issue address is addressed by setting the following code, which sets the text theme globally
textTheme: theme.textTheme.copyWith(
subhead: theme.textTheme.subhead
.copyWith(textBaseline: TextBaseline.alphabetic)),
Copy the codeMy text set overflow, why not effect
What we often hear is why my text is set to overflow, but it displays a yellow overflow warning? For Text, if its parent Widget doesn’t give it a size limit, it defaults to an infinite size. Here’s how to fix this.
- Give it a Size. If it doesn’t work, see why Size doesn’t work (especially when Row/Column is nested). You need to limit the size of the inner layer from the outermost layer. Refer to the following item.)
- Row/Column, make it Expaned/Flexible and that tells the text that your size is the space that’s left over from the other widgets. Expaned/Flexible both have this effect, but what’s the difference between them? I’ll show you two pictures and you’ll see.
return Row(
children: <Widget>[
Flexible(
child: Text(
"I am a very short text.",
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 12),
),
),
Container(
color: Colors.red,
width: 100.0,),);Copy the code
return Row(
children: <Widget>[
Expanded(
child: Text(
"I am a very short text.",
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 12),
),
),
Container(
color: Colors.red,
width: 100.0,),);Copy the code
The difference between Expaned and Flexible is that Expanded forces the remaining space of 100, while Flexible is adaptive. Of course, they’re going to take up at most the space left by 100.
Gets the location of the child in the scrolling component
demo
For more details, you can check out the article
The official Appbar is not working
Due to the addition of material style Settings in the official Appbar, there are some restrictions in many places. In fact, it is not the fault of the authorities, it is a design specification. But what do we do if we just want to be slutty? I wrote my_app_bar. Dart in the gists, and before I put it on the gists, it’s not convenient for you to see, and now I put it in the gists 🍬. This is a simple implementation, and once you understand how the code works, you can extend the AppBar to suit your own needs.
Nugget betta that homepage scrolling effect how to do?
Several people asked, so I wrote a simple demo. Headers are controlled primarily by NotificationListener to listen for scrolling.
Yellow warning ⚠ must be handled?
Not every kind of warning, all must be tube. A warning is just an official telling you to pay attention to it, which is why there is no warning under Release. Warning does not equal error.
Let me give you a chestnut. The body of the NestedScrollView is actually covered by SliverFillRemaining, and it’s going to scroll along with it. But in our layout, we have a Tabbar, which is a component with a fixed height that will be alerted when it goes off screen. But in fact, this warning does not affect our use.
Push /pop page re-build
If you’re hurting your business because of page re-builds, take a good look at the business logic code. The reason for the build is the animation of the route change and the page build caused by the route position change in Overlay in NavigatorState.
Use of ListView nesting, shrinkWrap
Nested listViews inside listViews, which I’ve seen all the time, get an error. And then someone will say set this to shrinkWrap and set it to true. Let’s take a look at what this property means.
/// Whether the extent of the scroll view in the [scrollDirection] should be determined by the contents being viewed.
///
/// If the scroll view does not shrink wrap, then the scroll view will expand to the maximum allowed size in the [scrollDirection]. If the scroll view has unbounded constraints in the [scrollDirection], then [shrinkWrap] must be true.
///
/// Shrink wrapping the content of the scroll view is significantly more expensive than expanding to the maximum allowed size because the content can expand and contract during scrolling, which means the size of the scroll view needs to be recomputed whenever the scroll position changes.
///
/// Defaults to false.
final bool shrinkWrap;
Copy the code-
Set shrinkWrap to true. The scrollView range will be the height of all content. Otherwise, it will be the viewport height. A list, or a ScrollView, actually has a concept of a Viewport, which is the part of the ScrollView that’s visible while you’re scrolling, and the size of that Viewport is something that you have to tell it or its parent tells it, and anything outside that Viewport will be recycled.
-
We can see here why using a Listview directly to nest a Listview causes an error. Because the Listview itself has no height limit, and if you put a Listview inside a Listview, the viewport of the Listview inside the Listview is unknown. So what do we do? Set shrinkWrap to true, making the Listview’s height equal to the height of its entire contents. So the Listview outside will know how tall the child is.
-
Setting shrinkWrap to true consumes performance. Because when you roll, you have to recalculate to see if the height changes. And it does not reclaim content outside the visible area.
-
Scenarios where listViews are nested with ListViews can often be solved using the Silver series. See the next problem for more details
Lifetime enemy of Silver? Love of a lifetime?
There are many things in the Silver series. Let’s introduce them one by one.
-
CustomScrollView is the ancestor of the Sliver component. All slivers are stored in the CustomScrollView. The ListView/GridView is not the same as the CustomScrollView component.
-
NestedScrollView is one that you use a lot, but it’s actually a CustomScrollView, and its headers are an array of slivers, and its body is wrapped in SliverFillRemaining
-
A SliverList is used in much the same way as a ListView, along with a CustomScrollView
-
SliverFixedExtentList, which is the same Extent as SliverList for better performance, is used with CustomScrollView
-
With SliverFixedExtentList SliverPrototypeExtentList spindle have the same among above, flexible, do not need to set the Extend, but according to prototypeItem to obtain among
-
SliverGrid, which allows you to set the number of grids per row, is used with CustomScrollView
-
SliverPadding, used just like Padding, except that child becomes sliver
SliverPadding(
sliver: SliverList(),
padding: EdgeInsets.all(5.0));Copy the code-
SliverPersistentHeader is a very useful component that the SliverAppBar is implemented with. The feature of this component is that it can create Pinned elements that stay Pinned to the slide. This is a handy way to build the most Pinned top components, such as the aforementioned custom SliverAppbar (my_APP_bar.dart).
-
The biggest difference between a SliverAppBar and an Appbar is that the contents can be collapsed according to the scrolling state, which is mainly composed of status bar height + navigation bar height + collapse height
-
SliverToBoxAdapter When you want to put a non-Sliver Widget inside a CustomScrollview, you need to wrap it around it.
-
SliverSafeArea is designed to prevent crossing various boundaries, such as crossing the status bar at the top
-
SliverFillRemaining uses this and it fills all the remaining space in the viewport. The body of the NestedScrollView is wrapped in this.
-
SliverOverlapAbsorber, SliverOverlapAbsorberHandle NestedScrollView solve Pinned the head, this is about filibuster-proof majority here, in front of me and speak with.
The Sliver series isn’t that scary, and if you understand how each Sliver works, you can do things that other platforms might struggle to do. Here are some commonly used chestnuts.
- Most cases of listViews nesting listViews can be replaced with the following code.
return CustomScrollView(
slivers: <Widget>[
SliverList(),
SliverList(),
],
);
Copy the codeIf you are nesting horizontally or vertically, you can set the height or width of the inner Listview
return ListView(
children: <Widget>[
SizedBox(
height: 60.0,
child: ListView.builder(
itemBuilder: (c, index) {}, scrollDirection: Axis.horizontal),
)
],
);
Copy the code- Mainstream App home page with scroll head
Notice that this NestedScrollView is not official, it’s my extension. See above for details
/// Since SliverAppBar is pinned:true, we need to count this height
var pinnedHeaderHeight =
//statusBar height
statusBarHeight +
//pinned SliverAppBar height in header
kToolbarHeight;
return NestedScrollView(
pinnedHeaderSliverHeightBuilder: () {
return pinnedHeaderHeight;
},
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled)
{
return <Widget>[
SliverAppBar(pinned:true),
// The banner can also be an AD space
SliverToBoxAdapter(),
// Of course you can have a list
SliverList(),
// We can also create content here that can be capped
// If this is pinned equal to true, remember to increase this height to pinnedHeaderHeight
SliverPersistentHeader()
];
},
body: Column(
children: <Widget>[
/// The Tabbar is Pinned below the SliverAppbar(Pinned :true).
/// / Of course, for example, the SliverAppbar has another pinned data. The tabbar will remain pinned to the ///true sliver. (total pinnedHeaderHeight should be (shape /// state height + navigation height =pinned to true SliverAppbar) + Pinne ///d = true Sliver height)
TabBar(),
Expanded(
child: TabBarView(),
)
],
),
);
Copy the code- List of groups
One of the benefits of writing this way is that the content can be recycled and performance is good.
return CustomScrollView(
slivers: <Widget>[
// Group header 1,
SliverToBoxAdapter(),
/ / group 1
/ / group 2Of course, we in the first item of SliverList under special treatment, increase the packet header SliverList (), SliverList (delegate: SliverChildBuilderDelegate ((c, index) {/ / / item content
Widget item = Container();
if (index == 0) {
item = Column(
children: <Widget>[
/// Group 2 header
Container(),
item
],
);
}
returnitem; })),,);Copy the codeOf course, they are endless, but when you learn to use them, one day, the enemy of your life will become the love of your life.
Other Frequently Asked Questions
Some of the questions collected earlier
conclusion
-
If you insist on seeing this, true love, add the little candy
QQ group: 181398081. We have people eating melons, security guards, guards, secretaries, group flowers, bosses, thank them for their silent pay. If you like to share, please join us; If you have something to share, please join us.
-
In the year of the pit Flutter, in addition to working time, I also spent a lot of time on Flutter in my spare time. Sometimes when you make a thing, you come up with an idea, and you may stay up until 4 or 5 in the morning. I’m not advocating this, but programmers need to pay attention to their bodies, and the body is the source of code. But if we can squeeze in an hour to study before going to bed every day, a year is 365 hours =15 days, I believe the harvest is still very big. Define a small goal for yourself and accomplish it one step at a time.
-
Finally, look ahead to next year’s Flutter. Expect hot updates, web performance improvements, and better support for C++.
