├── .gitbook.yaml ├── .gitignore ├── LICENSE ├── README.md ├── doc ├── SUMMARY.md ├── basics │ ├── u_cycle.md │ ├── u_f_app.md │ ├── u_f_layout.md │ ├── u_f_routes.md │ ├── u_h_async.md │ ├── u_s_json.md │ ├── u_t_javascript.md │ └── u_t_statefulwidget.md ├── images │ ├── flutter-0.png │ ├── flutter-1.png │ ├── flutter-10.gif │ ├── flutter-11.gif │ ├── flutter-12.jpeg │ ├── flutter-13.jpeg │ ├── flutter-14.jpeg │ ├── flutter-15.jpeg │ ├── flutter-16.jpeg │ ├── flutter-17.jpeg │ ├── flutter-18.gif │ ├── flutter-19.png │ ├── flutter-2.png │ ├── flutter-20.gif │ ├── flutter-21.png │ ├── flutter-22.png │ ├── flutter-23.png │ ├── flutter-24.gif │ ├── flutter-25.png │ ├── flutter-26.png │ ├── flutter-27.png │ ├── flutter-28.png │ ├── flutter-29.png │ ├── flutter-3.png │ ├── flutter-30.png │ ├── flutter-31.png │ ├── flutter-32.png │ ├── flutter-33.png │ ├── flutter-34.png │ ├── flutter-35.png │ ├── flutter-36.png │ ├── flutter-37.png │ ├── flutter-38.png │ ├── flutter-39.png │ ├── flutter-4.gif │ ├── flutter-40.png │ ├── flutter-41.png │ ├── flutter-42.png │ ├── flutter-43.gif │ ├── flutter-44.gif │ ├── flutter-45.gif │ ├── flutter-46.png │ ├── flutter-47.png │ ├── flutter-48.png │ ├── flutter-49.png │ ├── flutter-5.jpeg │ ├── flutter-50.png │ ├── flutter-51.png │ ├── flutter-52.gif │ ├── flutter-53.gif │ ├── flutter-54.gif │ ├── flutter-55.gif │ ├── flutter-56.gif │ ├── flutter-57.png │ ├── flutter-58.png │ ├── flutter-59.png │ ├── flutter-6.jpeg │ ├── flutter-60.gif │ ├── flutter-61.png │ ├── flutter-62.png │ ├── flutter-63.png │ ├── flutter-64.gif │ ├── flutter-65.png │ ├── flutter-66.png │ ├── flutter-67.gif │ ├── flutter-68.gif │ ├── flutter-69.png │ ├── flutter-7.jpeg │ ├── flutter-70.png │ ├── flutter-71.gif │ ├── flutter-72.png │ ├── flutter-8.jpeg │ ├── flutter-9.jpeg │ ├── flutter.jpg │ └── flutter.png ├── native │ ├── archive_ios.md │ ├── bridge_ios.md │ └── integrated_ios_flutter.md ├── preface.md ├── upday │ ├── bloc.md │ ├── debug.md │ ├── flex.md │ ├── mix.md │ ├── package_manage.md │ ├── redux.md │ ├── storage.md │ └── stream.md └── widget │ ├── column.md │ ├── container.md │ ├── dialog.md │ ├── gridview.md │ ├── listview.md │ ├── paddingaligncenter.md │ ├── row.md │ ├── scaffold.md │ ├── stack.md │ └── transform.md └── hello.dart /.gitbook.yaml: -------------------------------------------------------------------------------- 1 | # Root directory to locate the content 2 | # Default is the root directory of the repository. 3 | root: ./doc/ 4 | 5 | # Files to use as SUMMARY/README. 6 | # (Relative to directory) 7 | structure: 8 | readme: ../README.md 9 | summary: SUMMARY.md 10 | 11 | # Redirect urls to specific files (relative to the directory) 12 | #redirects: 13 | #previous/page: new-folder/page.md -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://www.dartlang.org/guides/libraries/private-files 2 | 3 | # Files and directories created by pub 4 | .dart_tool/ 5 | .packages 6 | .pub/ 7 | build/ 8 | # If you're building an application, you may want to check-in your pubspec.lock 9 | pubspec.lock 10 | 11 | # Directory created by dartdoc 12 | # If you don't generate documentation locally you can remove this line. 13 | doc/api/ 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU General Public License is a free, copyleft license for 11 | software and other kinds of works. 12 | 13 | The licenses for most software and other practical works are designed 14 | to take away your freedom to share and change the works. By contrast, 15 | the GNU General Public License is intended to guarantee your freedom to 16 | share and change all versions of a program--to make sure it remains free 17 | software for all its users. We, the Free Software Foundation, use the 18 | GNU General Public License for most of our software; it applies also to 19 | any other work released this way by its authors. You can apply it to 20 | your programs, too. 21 | 22 | When we speak of free software, we are referring to freedom, not 23 | price. Our General Public Licenses are designed to make sure that you 24 | have the freedom to distribute copies of free software (and charge for 25 | them if you wish), that you receive source code or can get it if you 26 | want it, that you can change the software or use pieces of it in new 27 | free programs, and that you know you can do these things. 28 | 29 | To protect your rights, we need to prevent others from denying you 30 | these rights or asking you to surrender the rights. Therefore, you have 31 | certain responsibilities if you distribute copies of the software, or if 32 | you modify it: responsibilities to respect the freedom of others. 33 | 34 | For example, if you distribute copies of such a program, whether 35 | gratis or for a fee, you must pass on to the recipients the same 36 | freedoms that you received. You must make sure that they, too, receive 37 | or can get the source code. And you must show them these terms so they 38 | know their rights. 39 | 40 | Developers that use the GNU GPL protect your rights with two steps: 41 | (1) assert copyright on the software, and (2) offer you this License 42 | giving you legal permission to copy, distribute and/or modify it. 43 | 44 | For the developers' and authors' protection, the GPL clearly explains 45 | that there is no warranty for this free software. For both users' and 46 | authors' sake, the GPL requires that modified versions be marked as 47 | changed, so that their problems will not be attributed erroneously to 48 | authors of previous versions. 49 | 50 | Some devices are designed to deny users access to install or run 51 | modified versions of the software inside them, although the manufacturer 52 | can do so. This is fundamentally incompatible with the aim of 53 | protecting users' freedom to change the software. The systematic 54 | pattern of such abuse occurs in the area of products for individuals to 55 | use, which is precisely where it is most unacceptable. Therefore, we 56 | have designed this version of the GPL to prohibit the practice for those 57 | products. If such problems arise substantially in other domains, we 58 | stand ready to extend this provision to those domains in future versions 59 | of the GPL, as needed to protect the freedom of users. 60 | 61 | Finally, every program is threatened constantly by software patents. 62 | States should not allow patents to restrict development and use of 63 | software on general-purpose computers, but in those that do, we wish to 64 | avoid the special danger that patents applied to a free program could 65 | make it effectively proprietary. To prevent this, the GPL assures that 66 | patents cannot be used to render the program non-free. 67 | 68 | The precise terms and conditions for copying, distribution and 69 | modification follow. 70 | 71 | TERMS AND CONDITIONS 72 | 73 | 0. Definitions. 74 | 75 | "This License" refers to version 3 of the GNU General Public License. 76 | 77 | "Copyright" also means copyright-like laws that apply to other kinds of 78 | works, such as semiconductor masks. 79 | 80 | "The Program" refers to any copyrightable work licensed under this 81 | License. Each licensee is addressed as "you". "Licensees" and 82 | "recipients" may be individuals or organizations. 83 | 84 | To "modify" a work means to copy from or adapt all or part of the work 85 | in a fashion requiring copyright permission, other than the making of an 86 | exact copy. The resulting work is called a "modified version" of the 87 | earlier work or a work "based on" the earlier work. 88 | 89 | A "covered work" means either the unmodified Program or a work based 90 | on the Program. 91 | 92 | To "propagate" a work means to do anything with it that, without 93 | permission, would make you directly or secondarily liable for 94 | infringement under applicable copyright law, except executing it on a 95 | computer or modifying a private copy. Propagation includes copying, 96 | distribution (with or without modification), making available to the 97 | public, and in some countries other activities as well. 98 | 99 | To "convey" a work means any kind of propagation that enables other 100 | parties to make or receive copies. Mere interaction with a user through 101 | a computer network, with no transfer of a copy, is not conveying. 102 | 103 | An interactive user interface displays "Appropriate Legal Notices" 104 | to the extent that it includes a convenient and prominently visible 105 | feature that (1) displays an appropriate copyright notice, and (2) 106 | tells the user that there is no warranty for the work (except to the 107 | extent that warranties are provided), that licensees may convey the 108 | work under this License, and how to view a copy of this License. If 109 | the interface presents a list of user commands or options, such as a 110 | menu, a prominent item in the list meets this criterion. 111 | 112 | 1. Source Code. 113 | 114 | The "source code" for a work means the preferred form of the work 115 | for making modifications to it. "Object code" means any non-source 116 | form of a work. 117 | 118 | A "Standard Interface" means an interface that either is an official 119 | standard defined by a recognized standards body, or, in the case of 120 | interfaces specified for a particular programming language, one that 121 | is widely used among developers working in that language. 122 | 123 | The "System Libraries" of an executable work include anything, other 124 | than the work as a whole, that (a) is included in the normal form of 125 | packaging a Major Component, but which is not part of that Major 126 | Component, and (b) serves only to enable use of the work with that 127 | Major Component, or to implement a Standard Interface for which an 128 | implementation is available to the public in source code form. A 129 | "Major Component", in this context, means a major essential component 130 | (kernel, window system, and so on) of the specific operating system 131 | (if any) on which the executable work runs, or a compiler used to 132 | produce the work, or an object code interpreter used to run it. 133 | 134 | The "Corresponding Source" for a work in object code form means all 135 | the source code needed to generate, install, and (for an executable 136 | work) run the object code and to modify the work, including scripts to 137 | control those activities. However, it does not include the work's 138 | System Libraries, or general-purpose tools or generally available free 139 | programs which are used unmodified in performing those activities but 140 | which are not part of the work. For example, Corresponding Source 141 | includes interface definition files associated with source files for 142 | the work, and the source code for shared libraries and dynamically 143 | linked subprograms that the work is specifically designed to require, 144 | such as by intimate data communication or control flow between those 145 | subprograms and other parts of the work. 146 | 147 | The Corresponding Source need not include anything that users 148 | can regenerate automatically from other parts of the Corresponding 149 | Source. 150 | 151 | The Corresponding Source for a work in source code form is that 152 | same work. 153 | 154 | 2. Basic Permissions. 155 | 156 | All rights granted under this License are granted for the term of 157 | copyright on the Program, and are irrevocable provided the stated 158 | conditions are met. This License explicitly affirms your unlimited 159 | permission to run the unmodified Program. The output from running a 160 | covered work is covered by this License only if the output, given its 161 | content, constitutes a covered work. This License acknowledges your 162 | rights of fair use or other equivalent, as provided by copyright law. 163 | 164 | You may make, run and propagate covered works that you do not 165 | convey, without conditions so long as your license otherwise remains 166 | in force. You may convey covered works to others for the sole purpose 167 | of having them make modifications exclusively for you, or provide you 168 | with facilities for running those works, provided that you comply with 169 | the terms of this License in conveying all material for which you do 170 | not control copyright. Those thus making or running the covered works 171 | for you must do so exclusively on your behalf, under your direction 172 | and control, on terms that prohibit them from making any copies of 173 | your copyrighted material outside their relationship with you. 174 | 175 | Conveying under any other circumstances is permitted solely under 176 | the conditions stated below. Sublicensing is not allowed; section 10 177 | makes it unnecessary. 178 | 179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 180 | 181 | No covered work shall be deemed part of an effective technological 182 | measure under any applicable law fulfilling obligations under article 183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 184 | similar laws prohibiting or restricting circumvention of such 185 | measures. 186 | 187 | When you convey a covered work, you waive any legal power to forbid 188 | circumvention of technological measures to the extent such circumvention 189 | is effected by exercising rights under this License with respect to 190 | the covered work, and you disclaim any intention to limit operation or 191 | modification of the work as a means of enforcing, against the work's 192 | users, your or third parties' legal rights to forbid circumvention of 193 | technological measures. 194 | 195 | 4. Conveying Verbatim Copies. 196 | 197 | You may convey verbatim copies of the Program's source code as you 198 | receive it, in any medium, provided that you conspicuously and 199 | appropriately publish on each copy an appropriate copyright notice; 200 | keep intact all notices stating that this License and any 201 | non-permissive terms added in accord with section 7 apply to the code; 202 | keep intact all notices of the absence of any warranty; and give all 203 | recipients a copy of this License along with the Program. 204 | 205 | You may charge any price or no price for each copy that you convey, 206 | and you may offer support or warranty protection for a fee. 207 | 208 | 5. Conveying Modified Source Versions. 209 | 210 | You may convey a work based on the Program, or the modifications to 211 | produce it from the Program, in the form of source code under the 212 | terms of section 4, provided that you also meet all of these conditions: 213 | 214 | a) The work must carry prominent notices stating that you modified 215 | it, and giving a relevant date. 216 | 217 | b) The work must carry prominent notices stating that it is 218 | released under this License and any conditions added under section 219 | 7. This requirement modifies the requirement in section 4 to 220 | "keep intact all notices". 221 | 222 | c) You must license the entire work, as a whole, under this 223 | License to anyone who comes into possession of a copy. This 224 | License will therefore apply, along with any applicable section 7 225 | additional terms, to the whole of the work, and all its parts, 226 | regardless of how they are packaged. This License gives no 227 | permission to license the work in any other way, but it does not 228 | invalidate such permission if you have separately received it. 229 | 230 | d) If the work has interactive user interfaces, each must display 231 | Appropriate Legal Notices; however, if the Program has interactive 232 | interfaces that do not display Appropriate Legal Notices, your 233 | work need not make them do so. 234 | 235 | A compilation of a covered work with other separate and independent 236 | works, which are not by their nature extensions of the covered work, 237 | and which are not combined with it such as to form a larger program, 238 | in or on a volume of a storage or distribution medium, is called an 239 | "aggregate" if the compilation and its resulting copyright are not 240 | used to limit the access or legal rights of the compilation's users 241 | beyond what the individual works permit. Inclusion of a covered work 242 | in an aggregate does not cause this License to apply to the other 243 | parts of the aggregate. 244 | 245 | 6. Conveying Non-Source Forms. 246 | 247 | You may convey a covered work in object code form under the terms 248 | of sections 4 and 5, provided that you also convey the 249 | machine-readable Corresponding Source under the terms of this License, 250 | in one of these ways: 251 | 252 | a) Convey the object code in, or embodied in, a physical product 253 | (including a physical distribution medium), accompanied by the 254 | Corresponding Source fixed on a durable physical medium 255 | customarily used for software interchange. 256 | 257 | b) Convey the object code in, or embodied in, a physical product 258 | (including a physical distribution medium), accompanied by a 259 | written offer, valid for at least three years and valid for as 260 | long as you offer spare parts or customer support for that product 261 | model, to give anyone who possesses the object code either (1) a 262 | copy of the Corresponding Source for all the software in the 263 | product that is covered by this License, on a durable physical 264 | medium customarily used for software interchange, for a price no 265 | more than your reasonable cost of physically performing this 266 | conveying of source, or (2) access to copy the 267 | Corresponding Source from a network server at no charge. 268 | 269 | c) Convey individual copies of the object code with a copy of the 270 | written offer to provide the Corresponding Source. This 271 | alternative is allowed only occasionally and noncommercially, and 272 | only if you received the object code with such an offer, in accord 273 | with subsection 6b. 274 | 275 | d) Convey the object code by offering access from a designated 276 | place (gratis or for a charge), and offer equivalent access to the 277 | Corresponding Source in the same way through the same place at no 278 | further charge. You need not require recipients to copy the 279 | Corresponding Source along with the object code. If the place to 280 | copy the object code is a network server, the Corresponding Source 281 | may be on a different server (operated by you or a third party) 282 | that supports equivalent copying facilities, provided you maintain 283 | clear directions next to the object code saying where to find the 284 | Corresponding Source. Regardless of what server hosts the 285 | Corresponding Source, you remain obligated to ensure that it is 286 | available for as long as needed to satisfy these requirements. 287 | 288 | e) Convey the object code using peer-to-peer transmission, provided 289 | you inform other peers where the object code and Corresponding 290 | Source of the work are being offered to the general public at no 291 | charge under subsection 6d. 292 | 293 | A separable portion of the object code, whose source code is excluded 294 | from the Corresponding Source as a System Library, need not be 295 | included in conveying the object code work. 296 | 297 | A "User Product" is either (1) a "consumer product", which means any 298 | tangible personal property which is normally used for personal, family, 299 | or household purposes, or (2) anything designed or sold for incorporation 300 | into a dwelling. In determining whether a product is a consumer product, 301 | doubtful cases shall be resolved in favor of coverage. For a particular 302 | product received by a particular user, "normally used" refers to a 303 | typical or common use of that class of product, regardless of the status 304 | of the particular user or of the way in which the particular user 305 | actually uses, or expects or is expected to use, the product. A product 306 | is a consumer product regardless of whether the product has substantial 307 | commercial, industrial or non-consumer uses, unless such uses represent 308 | the only significant mode of use of the product. 309 | 310 | "Installation Information" for a User Product means any methods, 311 | procedures, authorization keys, or other information required to install 312 | and execute modified versions of a covered work in that User Product from 313 | a modified version of its Corresponding Source. The information must 314 | suffice to ensure that the continued functioning of the modified object 315 | code is in no case prevented or interfered with solely because 316 | modification has been made. 317 | 318 | If you convey an object code work under this section in, or with, or 319 | specifically for use in, a User Product, and the conveying occurs as 320 | part of a transaction in which the right of possession and use of the 321 | User Product is transferred to the recipient in perpetuity or for a 322 | fixed term (regardless of how the transaction is characterized), the 323 | Corresponding Source conveyed under this section must be accompanied 324 | by the Installation Information. But this requirement does not apply 325 | if neither you nor any third party retains the ability to install 326 | modified object code on the User Product (for example, the work has 327 | been installed in ROM). 328 | 329 | The requirement to provide Installation Information does not include a 330 | requirement to continue to provide support service, warranty, or updates 331 | for a work that has been modified or installed by the recipient, or for 332 | the User Product in which it has been modified or installed. Access to a 333 | network may be denied when the modification itself materially and 334 | adversely affects the operation of the network or violates the rules and 335 | protocols for communication across the network. 336 | 337 | Corresponding Source conveyed, and Installation Information provided, 338 | in accord with this section must be in a format that is publicly 339 | documented (and with an implementation available to the public in 340 | source code form), and must require no special password or key for 341 | unpacking, reading or copying. 342 | 343 | 7. Additional Terms. 344 | 345 | "Additional permissions" are terms that supplement the terms of this 346 | License by making exceptions from one or more of its conditions. 347 | Additional permissions that are applicable to the entire Program shall 348 | be treated as though they were included in this License, to the extent 349 | that they are valid under applicable law. If additional permissions 350 | apply only to part of the Program, that part may be used separately 351 | under those permissions, but the entire Program remains governed by 352 | this License without regard to the additional permissions. 353 | 354 | When you convey a copy of a covered work, you may at your option 355 | remove any additional permissions from that copy, or from any part of 356 | it. (Additional permissions may be written to require their own 357 | removal in certain cases when you modify the work.) You may place 358 | additional permissions on material, added by you to a covered work, 359 | for which you have or can give appropriate copyright permission. 360 | 361 | Notwithstanding any other provision of this License, for material you 362 | add to a covered work, you may (if authorized by the copyright holders of 363 | that material) supplement the terms of this License with terms: 364 | 365 | a) Disclaiming warranty or limiting liability differently from the 366 | terms of sections 15 and 16 of this License; or 367 | 368 | b) Requiring preservation of specified reasonable legal notices or 369 | author attributions in that material or in the Appropriate Legal 370 | Notices displayed by works containing it; or 371 | 372 | c) Prohibiting misrepresentation of the origin of that material, or 373 | requiring that modified versions of such material be marked in 374 | reasonable ways as different from the original version; or 375 | 376 | d) Limiting the use for publicity purposes of names of licensors or 377 | authors of the material; or 378 | 379 | e) Declining to grant rights under trademark law for use of some 380 | trade names, trademarks, or service marks; or 381 | 382 | f) Requiring indemnification of licensors and authors of that 383 | material by anyone who conveys the material (or modified versions of 384 | it) with contractual assumptions of liability to the recipient, for 385 | any liability that these contractual assumptions directly impose on 386 | those licensors and authors. 387 | 388 | All other non-permissive additional terms are considered "further 389 | restrictions" within the meaning of section 10. If the Program as you 390 | received it, or any part of it, contains a notice stating that it is 391 | governed by this License along with a term that is a further 392 | restriction, you may remove that term. If a license document contains 393 | a further restriction but permits relicensing or conveying under this 394 | License, you may add to a covered work material governed by the terms 395 | of that license document, provided that the further restriction does 396 | not survive such relicensing or conveying. 397 | 398 | If you add terms to a covered work in accord with this section, you 399 | must place, in the relevant source files, a statement of the 400 | additional terms that apply to those files, or a notice indicating 401 | where to find the applicable terms. 402 | 403 | Additional terms, permissive or non-permissive, may be stated in the 404 | form of a separately written license, or stated as exceptions; 405 | the above requirements apply either way. 406 | 407 | 8. Termination. 408 | 409 | You may not propagate or modify a covered work except as expressly 410 | provided under this License. Any attempt otherwise to propagate or 411 | modify it is void, and will automatically terminate your rights under 412 | this License (including any patent licenses granted under the third 413 | paragraph of section 11). 414 | 415 | However, if you cease all violation of this License, then your 416 | license from a particular copyright holder is reinstated (a) 417 | provisionally, unless and until the copyright holder explicitly and 418 | finally terminates your license, and (b) permanently, if the copyright 419 | holder fails to notify you of the violation by some reasonable means 420 | prior to 60 days after the cessation. 421 | 422 | Moreover, your license from a particular copyright holder is 423 | reinstated permanently if the copyright holder notifies you of the 424 | violation by some reasonable means, this is the first time you have 425 | received notice of violation of this License (for any work) from that 426 | copyright holder, and you cure the violation prior to 30 days after 427 | your receipt of the notice. 428 | 429 | Termination of your rights under this section does not terminate the 430 | licenses of parties who have received copies or rights from you under 431 | this License. If your rights have been terminated and not permanently 432 | reinstated, you do not qualify to receive new licenses for the same 433 | material under section 10. 434 | 435 | 9. Acceptance Not Required for Having Copies. 436 | 437 | You are not required to accept this License in order to receive or 438 | run a copy of the Program. Ancillary propagation of a covered work 439 | occurring solely as a consequence of using peer-to-peer transmission 440 | to receive a copy likewise does not require acceptance. However, 441 | nothing other than this License grants you permission to propagate or 442 | modify any covered work. These actions infringe copyright if you do 443 | not accept this License. Therefore, by modifying or propagating a 444 | covered work, you indicate your acceptance of this License to do so. 445 | 446 | 10. Automatic Licensing of Downstream Recipients. 447 | 448 | Each time you convey a covered work, the recipient automatically 449 | receives a license from the original licensors, to run, modify and 450 | propagate that work, subject to this License. You are not responsible 451 | for enforcing compliance by third parties with this License. 452 | 453 | An "entity transaction" is a transaction transferring control of an 454 | organization, or substantially all assets of one, or subdividing an 455 | organization, or merging organizations. If propagation of a covered 456 | work results from an entity transaction, each party to that 457 | transaction who receives a copy of the work also receives whatever 458 | licenses to the work the party's predecessor in interest had or could 459 | give under the previous paragraph, plus a right to possession of the 460 | Corresponding Source of the work from the predecessor in interest, if 461 | the predecessor has it or can get it with reasonable efforts. 462 | 463 | You may not impose any further restrictions on the exercise of the 464 | rights granted or affirmed under this License. For example, you may 465 | not impose a license fee, royalty, or other charge for exercise of 466 | rights granted under this License, and you may not initiate litigation 467 | (including a cross-claim or counterclaim in a lawsuit) alleging that 468 | any patent claim is infringed by making, using, selling, offering for 469 | sale, or importing the Program or any portion of it. 470 | 471 | 11. Patents. 472 | 473 | A "contributor" is a copyright holder who authorizes use under this 474 | License of the Program or a work on which the Program is based. The 475 | work thus licensed is called the contributor's "contributor version". 476 | 477 | A contributor's "essential patent claims" are all patent claims 478 | owned or controlled by the contributor, whether already acquired or 479 | hereafter acquired, that would be infringed by some manner, permitted 480 | by this License, of making, using, or selling its contributor version, 481 | but do not include claims that would be infringed only as a 482 | consequence of further modification of the contributor version. For 483 | purposes of this definition, "control" includes the right to grant 484 | patent sublicenses in a manner consistent with the requirements of 485 | this License. 486 | 487 | Each contributor grants you a non-exclusive, worldwide, royalty-free 488 | patent license under the contributor's essential patent claims, to 489 | make, use, sell, offer for sale, import and otherwise run, modify and 490 | propagate the contents of its contributor version. 491 | 492 | In the following three paragraphs, a "patent license" is any express 493 | agreement or commitment, however denominated, not to enforce a patent 494 | (such as an express permission to practice a patent or covenant not to 495 | sue for patent infringement). To "grant" such a patent license to a 496 | party means to make such an agreement or commitment not to enforce a 497 | patent against the party. 498 | 499 | If you convey a covered work, knowingly relying on a patent license, 500 | and the Corresponding Source of the work is not available for anyone 501 | to copy, free of charge and under the terms of this License, through a 502 | publicly available network server or other readily accessible means, 503 | then you must either (1) cause the Corresponding Source to be so 504 | available, or (2) arrange to deprive yourself of the benefit of the 505 | patent license for this particular work, or (3) arrange, in a manner 506 | consistent with the requirements of this License, to extend the patent 507 | license to downstream recipients. "Knowingly relying" means you have 508 | actual knowledge that, but for the patent license, your conveying the 509 | covered work in a country, or your recipient's use of the covered work 510 | in a country, would infringe one or more identifiable patents in that 511 | country that you have reason to believe are valid. 512 | 513 | If, pursuant to or in connection with a single transaction or 514 | arrangement, you convey, or propagate by procuring conveyance of, a 515 | covered work, and grant a patent license to some of the parties 516 | receiving the covered work authorizing them to use, propagate, modify 517 | or convey a specific copy of the covered work, then the patent license 518 | you grant is automatically extended to all recipients of the covered 519 | work and works based on it. 520 | 521 | A patent license is "discriminatory" if it does not include within 522 | the scope of its coverage, prohibits the exercise of, or is 523 | conditioned on the non-exercise of one or more of the rights that are 524 | specifically granted under this License. You may not convey a covered 525 | work if you are a party to an arrangement with a third party that is 526 | in the business of distributing software, under which you make payment 527 | to the third party based on the extent of your activity of conveying 528 | the work, and under which the third party grants, to any of the 529 | parties who would receive the covered work from you, a discriminatory 530 | patent license (a) in connection with copies of the covered work 531 | conveyed by you (or copies made from those copies), or (b) primarily 532 | for and in connection with specific products or compilations that 533 | contain the covered work, unless you entered into that arrangement, 534 | or that patent license was granted, prior to 28 March 2007. 535 | 536 | Nothing in this License shall be construed as excluding or limiting 537 | any implied license or other defenses to infringement that may 538 | otherwise be available to you under applicable patent law. 539 | 540 | 12. No Surrender of Others' Freedom. 541 | 542 | If conditions are imposed on you (whether by court order, agreement or 543 | otherwise) that contradict the conditions of this License, they do not 544 | excuse you from the conditions of this License. If you cannot convey a 545 | covered work so as to satisfy simultaneously your obligations under this 546 | License and any other pertinent obligations, then as a consequence you may 547 | not convey it at all. For example, if you agree to terms that obligate you 548 | to collect a royalty for further conveying from those to whom you convey 549 | the Program, the only way you could satisfy both those terms and this 550 | License would be to refrain entirely from conveying the Program. 551 | 552 | 13. Use with the GNU Affero General Public License. 553 | 554 | Notwithstanding any other provision of this License, you have 555 | permission to link or combine any covered work with a work licensed 556 | under version 3 of the GNU Affero General Public License into a single 557 | combined work, and to convey the resulting work. The terms of this 558 | License will continue to apply to the part which is the covered work, 559 | but the special requirements of the GNU Affero General Public License, 560 | section 13, concerning interaction through a network will apply to the 561 | combination as such. 562 | 563 | 14. Revised Versions of this License. 564 | 565 | The Free Software Foundation may publish revised and/or new versions of 566 | the GNU General Public License from time to time. Such new versions will 567 | be similar in spirit to the present version, but may differ in detail to 568 | address new problems or concerns. 569 | 570 | Each version is given a distinguishing version number. If the 571 | Program specifies that a certain numbered version of the GNU General 572 | Public License "or any later version" applies to it, you have the 573 | option of following the terms and conditions either of that numbered 574 | version or of any later version published by the Free Software 575 | Foundation. If the Program does not specify a version number of the 576 | GNU General Public License, you may choose any version ever published 577 | by the Free Software Foundation. 578 | 579 | If the Program specifies that a proxy can decide which future 580 | versions of the GNU General Public License can be used, that proxy's 581 | public statement of acceptance of a version permanently authorizes you 582 | to choose that version for the Program. 583 | 584 | Later license versions may give you additional or different 585 | permissions. However, no additional obligations are imposed on any 586 | author or copyright holder as a result of your choosing to follow a 587 | later version. 588 | 589 | 15. Disclaimer of Warranty. 590 | 591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 599 | 600 | 16. Limitation of Liability. 601 | 602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 610 | SUCH DAMAGES. 611 | 612 | 17. Interpretation of Sections 15 and 16. 613 | 614 | If the disclaimer of warranty and limitation of liability provided 615 | above cannot be given local legal effect according to their terms, 616 | reviewing courts shall apply local law that most closely approximates 617 | an absolute waiver of all civil liability in connection with the 618 | Program, unless a warranty or assumption of liability accompanies a 619 | copy of the Program in return for a fee. 620 | 621 | END OF TERMS AND CONDITIONS 622 | 623 | How to Apply These Terms to Your New Programs 624 | 625 | If you develop a new program, and you want it to be of the greatest 626 | possible use to the public, the best way to achieve this is to make it 627 | free software which everyone can redistribute and change under these terms. 628 | 629 | To do so, attach the following notices to the program. It is safest 630 | to attach them to the start of each source file to most effectively 631 | state the exclusion of warranty; and each file should have at least 632 | the "copyright" line and a pointer to where the full notice is found. 633 | 634 | 635 | Copyright (C) 636 | 637 | This program is free software: you can redistribute it and/or modify 638 | it under the terms of the GNU General Public License as published by 639 | the Free Software Foundation, either version 3 of the License, or 640 | (at your option) any later version. 641 | 642 | This program is distributed in the hope that it will be useful, 643 | but WITHOUT ANY WARRANTY; without even the implied warranty of 644 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 645 | GNU General Public License for more details. 646 | 647 | You should have received a copy of the GNU General Public License 648 | along with this program. If not, see . 649 | 650 | Also add information on how to contact you by electronic and paper mail. 651 | 652 | If the program does terminal interaction, make it output a short 653 | notice like this when it starts in an interactive mode: 654 | 655 | Copyright (C) 656 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 657 | This is free software, and you are welcome to redistribute it 658 | under certain conditions; type `show c' for details. 659 | 660 | The hypothetical commands `show w' and `show c' should show the appropriate 661 | parts of the General Public License. Of course, your program's commands 662 | might be different; for a GUI interface, you would use an "about box". 663 | 664 | You should also get your employer (if you work as a programmer) or school, 665 | if any, to sign a "copyright disclaimer" for the program, if necessary. 666 | For more information on this, and how to apply and follow the GNU GPL, see 667 | . 668 | 669 | The GNU General Public License does not permit incorporating your program 670 | into proprietary programs. If your program is a subroutine library, you 671 | may consider it more useful to permit linking proprietary applications with 672 | the library. If this is what you want to do, use the GNU Lesser General 673 | Public License instead of this License. But first, please read 674 | . 675 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 小书介绍 2 | 3 | 4 | 5 | 跨平台开发框架 Flutter，用于 Fuchsia、Android、iOS 和 Web 开发，使用 Skia 2D 图形引擎、Dart 语言，GUI 一般采用质感设计（Material Design）。 6 | 7 | ## 作者介绍 8 | 9 | [icepy](https://github.com/icepy)，可访问：[https://icepy.me/](https://icepy.me/) 阅读。 10 | 11 | [知乎专栏：《我们可以学习更多》](https://zhuanlan.zhihu.com/fed-talk) ，程序员的前端专栏； 12 | 13 | ## 你会学到什么 14 | 15 | 当你学完整个小书后，可以做到： 16 | 17 | * 理解 Flutter 开发的各种知识 18 | 19 | ## 适宜人群 20 | 21 | * 具备 JavaScript 一定基础知识的开发人员 22 | * 希望掌握 Flutter 开发知识的前端开发人员 23 | 24 | ## 温馨提示 25 | 26 | * 本小书的 [目录-SUMMARY](./doc/SUMMARY.md) 27 | * 演示应用-女装大佬 [https://github.com/icepy/flutter-dress](https://github.com/icepy/flutter-dress) 28 | 29 | ## LICENSE 30 | 31 | GNU LESSER GENERAL PUBLIC LICENSE Version 3, 29 June 2007 32 | -------------------------------------------------------------------------------- /doc/SUMMARY.md: -------------------------------------------------------------------------------- 1 | # 目录 2 | 3 | * [小书介绍](../README.md) 4 | * [前言](./preface.md) 5 | * 入门基础 6 | * [编写你的第一个 Flutter App](./basics/u_f_app.md) 7 | * [编写你的第一个 StatefulWidget](./basics/u_t_statefulwidget.md) 8 | * [为 JavaScript 开发人员准备的 Dart 参考教程](./basics/u_t_javascript.md) 9 | * [你不可避免的 Flutter Routes](./basics/u_f_routes.md) 10 | * [谈谈 Flutter 的请求和异步](./basics/u_h_async.md) 11 | * [对 Flutter JSON序列化的一些理解](./basics/u_s_json.md) 12 | * [Flutter 布局的一些思考](./basics/u_f_layout.md) 13 | * [详解 Flutter 生命周期](./basics/u_cycle.md) 14 | * 常用 Widget 详解 15 | * [Row](./widget/row.md) 16 | * [Column](./widget/column.md) 17 | * [Scaffold](./widget/scaffold.md) 18 | * [Container](./widget/container.md) 19 | * [Padding，Align 和 Center](./widget/paddingaligncenter.md) 20 | * [Dialog](./widget/dialog.md) 21 | * [ListView](./widget/listview.md) 22 | * [Stack 和 IndexedStack](./widget/stack.md) 23 | * [GridView](./widget/gridview.md) 24 | * [Transform](./widget/transform.md) 25 | * Native 26 | * [将 Flutter 集成到已有的 iOS 工程中](./native/integrated_ios_flutter.md) 27 | * [谈谈 Flutter 的通信和插件](./native/bridge_ios.md) 28 | * [将 Flutter 应用发布到 iOS 平台](./native/archive_ios.md) 29 | * 渐进增强 30 | * [Flutter 调试技巧](./upday/debug.md) 31 | * [对于抽象 Widget 的意义](./upday/mix.md) 32 | * [详解 pubspec.yaml 包管理](./upday/package_manage.md) 33 | * [Flex 源码解读](./upday/flex.md) 34 | * [在 Flutter 中使用 Redux 来共享状态和管理单一数据](./upday/redux.md) 35 | * [使用 Stream 简单更新 UI](./upday/stream.md) 36 | * [在 Flutter 中使用 Bloc 来处理数据并更新 UI](./upday/bloc.md) 37 | * [关于 Flutter 本地存储的一些事](./upday/storage.md) -------------------------------------------------------------------------------- /doc/basics/u_cycle.md: -------------------------------------------------------------------------------- 1 | ## 详解 Flutter 生命周期 2 | 3 | 如果你写过 iOS 了解过 ViewController 那么其实能够了解生命周期在 UI 绘制的场景中是多么有用，Flutter 也存在生命周期，只不过它的回调方法都体现在 State 中，源码可参考：[https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/framework.dart#L930](https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/framework.dart#L930)，对于我们理解生命周期，写出一个合理的 Widget 至关重要。 4 | 5 | ![](../images/flutter-70.png) 6 | 7 | 大体上它的生命周期可以分为三个阶段： 8 | 9 | - 初始化 10 | - 状态改变 11 | - 销毁 12 | 13 | 各方法可参考：[https://docs.flutter.io/flutter/widgets/State-class.html#instance-methods](https://docs.flutter.io/flutter/widgets/State-class.html#instance-methods)，这里我只举例两个最常用的，因为它和我们的场景至关重要。 14 | 15 | ### didUpdateWidget 16 | 17 | 当你调用了 setState 将 Widget 的状态被改变时 didUpdateWidget 会被调用，Flutter 会创建一个新的 Widget 来绑定这个 State，并在这个方法中传递旧的 Widget ，因此如果你想比对新旧 Widget 并且对 State 做一些调整，你可以用它，另外如果你的某些 Widget 上涉及到 controller 的变更，要么一定要在这个回调方法中移除旧的 controller 并创建新的 controller 监听。 18 | 19 | ```dart 20 | @override 21 | void didUpdateWidget(AVCycleLess oldWidget){ 22 | super.didUpdateWidget(oldWidget); 23 | } 24 | ``` 25 | 26 | ### dispose 27 | 28 | 某些情况下你的 Widget 被释放了，一个很经典的例子是 Navigator.pop 被调用，如果被释放的 Widget 中有一些监听或持久化的变量，你需要在 dispose 中进行释放，在我们学习 Bloc 或 Stream 时应该能了解 dispose ，在这个回调方法中去关闭 Stream。 29 | 30 | ```dart 31 | void dispose(){ 32 | _countController.close(); 33 | _actionController.close(); 34 | } 35 | ``` 36 | 37 | ### 关于 App 的生命周期 38 | 39 | 我们知道在 App 中会有比如从前台切入到后台再从后台切入到前台的场景，在 iOS 中这些生命周期都可以在 AppDelegate 中被体现，那么 Flutter 中我们该如何处理这些场景？对于 App 级别的生命周期与上述 Widget 生命周期相比，稍有不同。 40 | 41 | 源代码可参考：[https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/binding.dart](https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/binding.dart) 42 | 43 | ```bash 44 | flutter: AppLifecycleState.inactive 45 | flutter: AppLifecycleState.paused 46 | flutter: AppLifecycleState.inactive 47 | flutter: AppLifecycleState.resumed 48 | ``` 49 | 50 | 上述是 App 级别生命周期的执行顺序。 51 | 52 | 先让我们来改造一下 AVCycleLess 这个 StatefulWidget，如果我们想监听 App 级别的生命周期需要使用 WidgetsBinding 来监听 WidgetsBindingObserver，因此我们需要把 State 稍微改变一下，并且我们也需要在 dispose 回调方法中移除这个监听。 53 | 54 | ```dart 55 | class AVCycleLessState extends State with WidgetsBindingObserver {} 56 | ``` 57 | 58 | 重载 didChangeAppLifecycleState ，Flutter 封装了一个枚举 AppLifecycleState 来描述这个生命周期，完整代码如下： 59 | 60 | ```dart 61 | class AVCycleLess extends StatefulWidget { 62 | 63 | AVCycleLess({Key key}): super(key: key); 64 | 65 | AVCycleLessState createState() => new AVCycleLessState(); 66 | } 67 | 68 | class AVCycleLessState extends State with WidgetsBindingObserver { 69 | 70 | 71 | @override 72 | void initState(){ 73 | super.initState(); 74 | WidgetsBinding.instance.addObserver(this); 75 | } 76 | 77 | @override 78 | Widget build(BuildContext context){ 79 | return new MaterialApp( 80 | home: new Scaffold( 81 | appBar: new AppBar( 82 | title: new Text('AVCycleLess'), 83 | ), 84 | body: new Center( 85 | child: new Text('AVCycleLess---'), 86 | ), 87 | ), 88 | ); 89 | } 90 | 91 | @override 92 | void didChangeAppLifecycleState(AppLifecycleState state) { 93 | debugPrint('$state'); 94 | } 95 | 96 | @override 97 | void dispose(){ 98 | WidgetsBinding.instance.removeObserver(this); 99 | super.dispose(); 100 | } 101 | } 102 | 103 | ``` 104 | 105 | -------------------------------------------------------------------------------- /doc/basics/u_f_app.md: -------------------------------------------------------------------------------- 1 | ## 编写你的第一个 Flutter App 2 | 3 | Flutter 是 Google 用以帮助开发者在 iOS 和 Andorid 两个平台开发高质量 UI 的移动 SDK，免费且开源。为了体验 Flutter 编写的 App，我将它的示例应用编译了起来，UI处理确实很细腻入微，沉浸式的体验过之后，发觉到值得我们深入去学习。 4 | 5 | 示例项目地址：[https://github.com/2d-inc/HistoryOfEverything](https://github.com/2d-inc/HistoryOfEverything) 6 | 7 | ![](../images/flutter-4.gif) 8 | 9 | 既然是编写你的第一个 Flutter App，本文仅仅从入门的角度而言，它需要你准备一些很入门的工作，如下： 10 | 11 | - 能访问 Google 资源的网络 12 | - 安装 Xcode，因为我们需要 iOS 模拟器 13 | - 正确的安装 Flutter SDK 14 | - 安装 VSCode 和 Flutter 插件 15 | 16 | 在你的bash 中配置：export PATH="$HOME/flutter/bin:$PATH"，在终端运行 flutter 是否有如下图所示 17 | 18 | ![](../images/flutter-5.jpeg) 19 | 20 | 我们将使用 VSCode 创建一个简单的基于模板的 Flutter 工程，然后我们将项目命名为 my_flutter_app，使用 command + shift + p 唤起 VSCode 控制台，选择 Flutter: New Project ，输入 my_flutter_app 然后按下回车，等待如图： 21 | 22 | ![](../images/flutter-6.jpeg) 23 | 24 | 在控制台中选择 Flutter 的配置，然后启动调试，最终的结果如图： 25 | 26 | ![](../images/flutter-7.jpeg) 27 | 28 | 让我们从示例代码中修改几个字看看，将 Flutter Demo 修改为 My Flutter App，Flutter Demo Home Page 修改为 My Flutter App Home Page ，如图： 29 | 30 | ![](../images/flutter-8.jpeg) 31 | 32 | 对于一个健全的 App ，我们可能会依赖官方或第三方成熟的包来开发我们的应用，对于 Flutter 而言它的包管理工具和 Node.js 的 package.json 类似，在 pubspec.yaml 中你可以添加一个第三方包，一旦你保存了 pubspec.yaml 文件，VSCode 会自动的帮你下载，安装这个 Flutter Package ，因此它需要你的环境可以正常的访问 Google 的资源，这很重要。当然如果你不想 VSCode 自动下载安装，也可以在你的工程目录中，输入：flutter package get 来完成安装的进度； 33 | 34 | 接下来，让我们在示例项目中添加一个输出 hello icepy ，创建一个简单的文本 StatelessWidget ，用于显示 hello icepy，并把它添加到 _MyHomePageState 中。 35 | 36 | ```dart 37 | class MyText extends StatelessWidget { 38 | 39 | @override 40 | Widget build(BuildContext context){ 41 | return ( 42 | Text( 43 | 'hello icepy' 44 | ) 45 | ); 46 | } 47 | } 48 | ``` 49 | 50 | ![](../images/flutter-9.jpeg) 51 | 52 | 它看起来会是这样的，hello icepy 居中在原 Text 的上方，这是因为我将 MyText 添加在了 children 的第一个元素位置，它被 Center 和 Column 包裹着，必然如此。如果你能阅读到此处，那么恭喜你，这将是你编写的第一个 Flutter App，为你的ID添加了一个 hello ，这很有趣。 -------------------------------------------------------------------------------- /doc/basics/u_f_layout.md: -------------------------------------------------------------------------------- 1 | ## Flutter 布局的一些思考 2 | 3 | 这篇文章深入理解了官方提供的三篇关于布局的文章而提炼出来的前端视角，浓缩虽有精华可也有瑕疵，只能着重梳理相关的知识点，对于在实践的过程里该如何布局，有着重要的指导意义； 4 | 5 | - [https://flutter.io/docs/development/ui/layout](https://flutter.io/docs/development/ui/layout) 6 | - [https://flutter.io/docs/development/ui/layout/tutorial](https://flutter.io/docs/development/ui/layout/tutorial) 7 | - [https://flutter.io/docs/development/ui/layout/box-constraints](https://flutter.io/docs/development/ui/layout/box-constraints) 8 | 9 | 让我们先来看一看前端的布局知识点归纳对于 Flutter 布局可参考的地方： 10 | 11 | - 盒模型 12 | - div 13 | - position 14 | - flex 15 | 16 | 稍微不同的是 Flutter 布局的核心机制是 Widget，因为在 Flutter 中布局模型也是 Widget，比如 Text Image 和 Icon，这个设计的思路借鉴了 React 的设计风格，让我们来看一张很直白的图： 17 | 18 | ![](../images/flutter-23.png) 19 | 20 | 大多数情况下如上图所料你可以使用 Container 来添加一些填充，边距，使用 Row 和 Column 来进行排列，通过这样的组合才能还原出有效的设计图。那么，对于前端的同学们来说该如何有一个对比的参考？我将它进行了一些归纳。 21 | 22 | - Container 可以对比参考 div 23 | - Row 可以对比参考 flex-direction: row 24 | - Column 可以对比参考 flex-direction: column 25 | - Center 可以对比参考 justify-content: center 和 align-items: center 26 | - Stack 可以对比参考 position 27 | - Padding 可以对比参考 padding 28 | 29 | 不过，对于 Flutter 来说它提供了几十种布局类 Widget，对于入门新手曲线较高，因为每一个 Widget 的理解和掌握并在实践中合理的选择哪一个布局 Widget 成了问题。不过这样的方式优点也很突出，毕竟这些 Widget 是官方维护的，在优化方向上能有更多的掌控，对于生态中的开发者而言也能开发出性能和体验更好的应用。 30 | 31 | 我给布局类的 Widget 归纳了三点： 32 | 33 | - 只有一个元素 child 的布局 Widget，比如 Container 34 | - 可以 add 多个子元素 children 的布局 Widget，比如 Row 35 | - 类似 layout helper 布局，比较典型的如 ListView 36 | 37 | ### box constraints 38 | 39 | 接下来我们还需要聊一聊 box constraints，应该来说它才是 Flutter 布局的核心设计，非常有趣的是这样的设计思路和 iOS 的约束布局，React 中大行其道的 CSS in JavaScript 有了那么点相同的味道。 40 | 41 | 在 Flutter 里 Widget 的渲染是由 RenderBox 来呈现的，反而它的布局约束依赖于父 Widget 的实现，其自身会在这个父 Widget 中自动调整它的大小高宽。换句话来讲如果你的父 Widget 是 Row ，那么在布局上就是横排列。如果你的父 Widget 是 Container 并且设置了宽度，那么自身 Widget 的渲染也会跟随它父 Widget 的布局约束条件而自行调整。 42 | 43 | ### 总结 44 | 45 | Flutter 布局的过程其实就是拆解组装的过程，在[前言](../preface.md)的布局小节里用pixabay的布局抛砖引玉下。 46 | 47 | 慢慢学这几十个布局类 Widget 吧 ！ -------------------------------------------------------------------------------- /doc/basics/u_f_routes.md: -------------------------------------------------------------------------------- 1 | ## 你不可避免的 Flutter Routes 2 | 3 | 如果你开发过单页应用并且使用过 react-dom-router ，那么对于一个 Web App 来说通过路由跳转到一个新的页面对于你的业务来说有多么重要。在 Flutter 里路由的切换也同等重要，相应的 Flutter 的导航器管理着应用程序的路由栈，将页面 push 到导航器中或 pop 出导航器，这一点上非常类似 react-dom-router 提供的功能； 4 | 5 | 在这一篇文章里，我们将学习到如何为 AVUpdateState 添加一个 _push 方法和导航器； 6 | 7 | ![](../images/flutter-11.gif) 8 | 9 | 为此我们先定义一个 Stateless AVTextWidget ，它只是显示一个 new Page 的文本，并且是垂直居中的。 10 | 11 | ```dart 12 | class AVTextWidget extends StatelessWidget { 13 | @override 14 | Widget build(BuildContext context) { 15 | return new Scaffold( 16 | appBar: new AppBar( 17 | title: new Text('new Page'), 18 | ), 19 | body: new Center( 20 | child: new Text( 21 | 'new Page' 22 | ), 23 | ) 24 | ); 25 | } 26 | } 27 | ``` 28 | 29 | 在 AVUpdateState 中定义一个 _push 方法，并且在 appBar 中添加一个稍微好看一些的按钮，我选择的是 `Icons.account_balance` ，在 onPressed 中调用我们已经定义的 _push 方法。_push 方法中我们会使用到 Navigator 和 MaterialPageRoute ，当用户点击那个 icon 时我们会创建一个路由并将其 push 到导航管理器栈中。 30 | 31 | ```dart 32 | Navigator.of(context).push( 33 | MaterialPageRoute( 34 | builder: (BuildContext context){ 35 | return AVTextWidget(); 36 | } 37 | ) 38 | ); 39 | ``` 40 | 41 | 为了让它看起来像一个 App 的页面，在 builder 中 我直接返回了一个 Scaffold 并且定义了一个 appBar 显示 new Page。相应的，我们也可以使用 Navigator.of(context).pop 来返回上一个页面。 42 | 43 | 不过，这样的路由看起来还非常的简陋，想象一下当我们使用 React 时路由的跳转可以很方便的利用命名来完成，在 Flutter 里，我们也可以完成这样的映射关系，只不过我们需要在 MaterialApp 中完成。 44 | 45 | ```dart 46 | class MyApp extends StatelessWidget { 47 | @override 48 | Widget build(BuildContext context) { 49 | return new MaterialApp( 50 | title: 'Welcome to Flutter', 51 | home: new AVUpdate(), 52 | routes: { 53 | '/push': (BuildContext context) => AVTextWidget(), 54 | }, 55 | ); 56 | } 57 | } 58 | ``` 59 | 60 | 修改 _push 方法中的逻辑 61 | 62 | ```dart 63 | Navigator.of(context).pushNamed('/push'); 64 | ``` 65 | 66 | 当你阅读到此处，恭喜你开始具备开发多页面的能力了； -------------------------------------------------------------------------------- /doc/basics/u_h_async.md: -------------------------------------------------------------------------------- 1 | ## 谈谈 Flutter 中的请求和异步 2 | 3 | 如果你了解过 JavaScript 的线程模型，那么就会明白当你遇到有延迟的运算时（请求），它的运行过程都是异步的，只有这样你的 Web 应用UI才不会出现明显的卡顿。在现实的网络世界里，多数情况下我们的业务都基于请求而展开的，Dart也是一个单线程的语言，因此在操作请求时它的运行过程也是异步，Dart.io 中封装了操作请求的类，你可以很便捷的使用它们。 4 | 5 | 让我们来看一个例子，请求 [https://api.github.com/users/icepy](https://api.github.com/users/icepy)，然后更新UI： 6 | 7 | ![](../images/flutter-18.gif) 8 | 9 | ```dart 10 | import 'dart:io'; 11 | var httpClient = new HttpClient(); 12 | 13 | ...doing 14 | ``` 15 | 16 | 这篇文章会用前端的视角来描述一下关于在 Flutter 中如何处理异步的问题。上述例子中，我写了两种方式来操作请求，并更新界面；如果你是前端那么一定了解 Promise 和 axios，Promise 是前端处理异步所有方案的基石。 17 | 18 | ```javascript 19 | const axios = require('axios'); 20 | axios.get('/user?ID=12345') 21 | .then(function (response) { 22 | // handle success 23 | console.log(response); 24 | }) 25 | .catch(function (error) { 26 | // handle error 27 | console.log(error); 28 | }) 29 | .then(function () { 30 | // always executed 31 | }); 32 | ``` 33 | 34 | 那么让我们来看一看 Dart 版的异步请求： 35 | 36 | ```dart 37 | final githubURL = 'https://api.github.com/users/icepy'; 38 | var httpClient = new HttpClient(); 39 | String jsonStr = ''; 40 | httpClient.getUrl(Uri.parse(githubURL)).then((HttpClientRequest request){ 41 | return request.close(); 42 | }).then((HttpClientResponse response){ 43 | response.transform(utf8.decoder).listen((contents){ 44 | jsonStr += contents; 45 | }).onDone(() { 46 | // jsonStr 47 | }); 48 | }); 49 | ``` 50 | 51 | 是不是有一种和 Promise 非常类似的感觉？其实 getUrl 返回的是一个 Future，你可以把它理解为前端的 Promise。只不过在 Dart 的世界里 Future 是它来表示异步操作的的方式，**事件循环**和**线程队列**真是一个很神奇的设计，我们又遇到了它。 52 | 53 | 那么，我们还有没有更直观的方案来处理异步操作？ 54 | 55 | 对于前端的同学都非常了解 async 和 await 特性，在 Dart 的世界里也有 async 和 await，我们可以通过这些关键字的标记来处理异步请求。 56 | 57 | ```dart 58 | Future _getAsyncMyUserInfo() async { 59 | final githubURL = 'https://api.github.com/users/icepy'; 60 | var httpClient = new HttpClient(); 61 | var request = await httpClient.getUrl(Uri.parse(githubURL)); 62 | var response = await request.close(); 63 | var body = await response.transform(utf8.decoder).join(); 64 | return body; 65 | } 66 | ``` 67 | 68 | 其实它返回的也是一个 Future，只不过对于 Dart 处理 async await 有它自己的定义，总结下来就是两条： 69 | 70 | - await 必须在 async 函数里执行 71 | - 要执行 async 函数必须用 await 关键字 72 | 73 | 在我们上述的 Widget 中我们没法把 builder 标记为 async ，这其实就比较纠结了，如果要从根上能运行 async 定义的函数或方法，我们还是需要借助 Future 来完成。 74 | 75 | ```dart 76 | 77 | Future> dingFuture = new Future(_getAsyncMyUserInfo); 78 | 79 | dingFuture.then((done){ 80 | done.then((contents){ 81 | var data = jsonDecode(contents); 82 | _updateUI(data['login'], data['avatar_url']); 83 | }); 84 | }); 85 | ``` 86 | 87 | 当然 async await 和 Future 的结合有很多种玩法，因此 Future 对于开发者来说是必须要掌握的一个特性，就像前端的同学必须掌握 Promise 一样，当你对它的原理足够理解，你就会明白，向 event queue 插入你的 event handler 是多么的重要，它将贯彻你开发 Flutter 应用的全部过程。 88 | 89 | 在我们真实的业务场景中多数情况下不会使用这么低级的API去处理请求，要么封装要么使用开源库，Dart Team 官方提供了一个 http package [https://pub.dartlang.org/packages/http](https://pub.dartlang.org/packages/http)，来让我们更方便的开发业务。 90 | 91 | ```dart 92 | import 'package:http/http.dart' as http; 93 | 94 | var url = "http://example.com/whatsit/create"; 95 | http.post(url, body: {"name": "doodle", "color": "blue"}) 96 | .then((response) { 97 | print("Response status: ${response.statusCode}"); 98 | print("Response body: ${response.body}"); 99 | }); 100 | 101 | http.read("http://example.com/foobar.txt").then(print); 102 | ``` -------------------------------------------------------------------------------- /doc/basics/u_s_json.md: -------------------------------------------------------------------------------- 1 | ## 对 Flutter JSON序列化的一些理解 2 | 3 | 在没有类型检查的语言（JavaScript）中，当你需要从 [https://api.github.com/users/icepy](https://api.github.com/users/icepy) 获取数据来更新UI时，最大的可能也就是 JSON.parse 一下，然后直接 data['login'] 来使用，这并不是一个很好的注意。当你开始使用 TypeScript 时，也许你会： 4 | 5 | ```javascript 6 | interface IResult { 7 | login: string; 8 | id: number; 9 | node_id: string; 10 | avatar_url: string; 11 | } 12 | 13 | interface IResponse { 14 | data: T 15 | } 16 | ``` 17 | 18 | 定义这样的接口来描述你将使用的字段名，这会是一个很好的开始。 19 | 20 | 在 Flutter 的世界里你也可以很简单的去 parse 一下然后使用这些数据，导入 dart:convert即可，在一个简单的例子中我们来展示该如何使用： 21 | 22 | ```dart 23 | import 'dart:convert'; 24 | 25 | Map user = jsonDecode(jsonString); 26 | 27 | user['login'] 28 | user['id'] 29 | ``` 30 | 31 | 不过，我们可以将它改造的更有用一些，如果你了解过传统的 MVC 模型，那么你就知道定义一个 Model 会非常有用。让我们接上一个例子，写一个 AVModel 类然后稍微改造一下： 32 | 33 | ```dart 34 | class AVModel { 35 | final String name; 36 | final int id; 37 | final String avatar; 38 | 39 | AVModel(this.name, this.id, this.avatar); 40 | 41 | AVModel.fromJSON(Map json) 42 | :id = json['id'], 43 | name = json['login'], 44 | avatar = json['avatar_url']; 45 | } 46 | ``` 47 | 48 | ```dart 49 | Future> dingFuture = new Future(_getAsyncMyUserInfo); 50 | dingFuture.then((done){ 51 | done.then((contents){ 52 | var data = jsonDecode(contents); 53 | var avModel = AVModel.fromJSON(data); 54 | _updateUI(avModel); 55 | }); 56 | }); 57 | 58 | _updateUI(AVModel avModel){ 59 | setState(() { 60 | _avName = avModel.name; 61 | _avImage = avModel.avatar; 62 | }); 63 | } 64 | ``` 65 | 66 | ![](../images/flutter-19.png) 67 | 68 | 和请求模块一样，Dart Team官方也提供了一个封装程度较高的 package [https://pub.dartlang.org/packages/json_annotation](https://pub.dartlang.org/packages/json_annotation)。 69 | 70 | 序列化和反序列化多数的方案都是为了方便管理业务数据而生的，Dart 团队和社区在这方面讨论诸多，我们只需要借鉴和思考哪些方案是适合现阶段的业务，哪些方案是未来可以升级改造的，有时候过度的优化，反而对实现有了太强的约束，合适真的很重要。 -------------------------------------------------------------------------------- /doc/basics/u_t_javascript.md: -------------------------------------------------------------------------------- 1 | ## 为 JavaScript 开发人员准备的 Dart 参考教程 2 | 3 | Dart 是 Flutter 主要的开发语言，这一篇文章主要为 JavaScript 开发人员准备的 Dart 教程，我会用很详细的对比来参考，力争 JavaScript 开发人员可以快速的熟练使用 Dart，为使用 Flutter 做好准备； 4 | 5 | > 使用 es2015 做为参照； 6 | 7 | 示例可以使用 [https://dartpad.dartlang.org/](https://dartpad.dartlang.org/) 来运行；Dart 和 JavaScript 有非常重要的不同，Dart2 开始它变成了一个强类型的语言，JavaScript 开发人员可以类比你在使用 TypeScript 。 8 | 9 | ## 常量和变量 10 | 11 | 变量 12 | 13 | *JavaScript* 14 | 15 | ```javascript 16 | var c = 1; 17 | c = 2; 18 | 19 | let a = 1; 20 | a = 2; 21 | ``` 22 | 23 | *Dart* 24 | 25 | ```dart 26 | int a = 1; 27 | a = 2; 28 | 29 | var h = 1; 30 | h = 2; 31 | ``` 32 | 33 | 常量 34 | 35 | *JavaScript* 36 | 37 | ```javascript 38 | const b = 1; 39 | ``` 40 | 41 | *Dart* 42 | 43 | ```dart 44 | final b = 1; 45 | const ggg = 1; 46 | ``` 47 | 48 | `final` 和 `const` 唯一的区别是 final 可以接收一个变量但 const 不行，多数情况下我们会使用 final 来定义只赋值一次的值； 49 | 50 | ## 函数 51 | 52 | 定义函数 53 | 54 | *JavaScript* 55 | 56 | ```javascript 57 | function a(){} 58 | const b = function(){} 59 | ``` 60 | 61 | *Dart* 62 | 63 | ```dart 64 | void funcs(){} 65 | final funcs = (){} 66 | ``` 67 | 68 | 多数情况下 Dart 的函数和 JavaScript 的函数都有一样的特性，如： 69 | 70 | - 将函数当做参数进行传递 71 | - 将函数直接赋值给变量 72 | - 对函数进行解构，只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数 73 | - 创建一个可以被当作为常量的匿名函数 74 | 75 | 当你要使用一个非常简单的函数时，比如只返回一个字符串，它的表现形式和 JavaScript 的箭头函数非常的像； 76 | 77 | *JavaScript* 78 | 79 | ```javascript 80 | 81 | const d = () => 'dd'; 82 | 83 | ``` 84 | 85 | *Dart* 86 | 87 | ```dart 88 | String d() => 'dd'; 89 | ``` 90 | 91 | 实际上它可以等价为： 92 | 93 | *JavaScript* 94 | 95 | ```javascript 96 | 97 | const d = () => { 98 | return 'dd'; 99 | } 100 | 101 | ``` 102 | 103 | *Dart* 104 | 105 | ```dart 106 | String d(){ 107 | return 'dd'; 108 | } 109 | ``` 110 | 111 | 当我们需要传递一个函数做为参数时： 112 | 113 | *javascript* 114 | 115 | ```javascript 116 | 117 | function a(){ 118 | console.log('a'); 119 | } 120 | 121 | function b(funcs){ 122 | funcs() 123 | } 124 | 125 | b(a); 126 | 127 | ``` 128 | 129 | *Dart* 130 | 131 | ```javascript 132 | String dd() => 'dd'; 133 | 134 | void PrintString(funcs){ 135 | print(funcs()); 136 | } 137 | 138 | PrintString(dd); 139 | 140 | ``` 141 | 142 | ## 枚举 143 | 144 | *JavaScript* 145 | 146 | JavaScript 并没有定义枚举关键字，不过你可以使用对象的方式来代替。 147 | 148 | ```javascript 149 | const Color = { 150 | red: 0, 151 | green: 1, 152 | blue: 2 153 | } 154 | ``` 155 | 156 | *Dart* 157 | 158 | ```dart 159 | enum Color { red, green, blue } 160 | 161 | var aColor = Color.blue; 162 | 163 | switch (aColor) { 164 | case Color.red: 165 | print('Red as roses!'); 166 | break; 167 | case Color.green: 168 | print('Green as grass!'); 169 | break; 170 | default: // Without this, you see a WARNING. 171 | print(aColor); // 'Color.blue' 172 | } 173 | ``` 174 | 175 | ## 字符串模板 176 | 177 | JavaScript 的模板和 Dart 一样，都是一个表达式； 178 | 179 | *javascript* 180 | 181 | ```javascript 182 | 183 | const d = 'icepy'; 184 | 185 | `hello ${d}`; 186 | 187 | function dd(){ 188 | return 'dd'; 189 | } 190 | 191 | `hello ${dd()}`; 192 | 193 | ``` 194 | 195 | *Dart* 196 | 197 | ```dart 198 | final d = 'icepy'; 199 | 200 | 'hello $d'; 201 | 202 | String dd() => 'dd'; 203 | 204 | 'hello ${dd()}'; 205 | ``` 206 | 207 | ## 模块导入和导出 208 | 209 | JavaScript 使用 import 和 export 来导入导出模块，Dart 也使用了 import 来导入模块，只不过它和 JavaScript 有一个显著的区别，Dart 并不需要使用 export 来导出模块，如果你的 library 有很多文件组成，那么还是需要使用 export 来导出这些文件。 210 | 211 | *javascript* 212 | 213 | ```javascript 214 | import xxx from "xxx"; 215 | import * as xx from "xxx"; 216 | import { xx } from "xxx"; 217 | ``` 218 | 219 | *Dart* 220 | 221 | ```dart 222 | import 'package:xxx/xxx'; 223 | 224 | import 'package:xxx/xxx' show xxx; //导出其中一个对象 225 | 226 | import 'package:xxx/xxx' hide yyy; //导出模块时不导出yyy 227 | 228 | import 'package:xxx/xxx' as myxxx; //给导出的模块加上别名 229 | ``` 230 | 231 | ## 类 232 | 233 | 为了更好的用语言来描述你的程序，类就是这样一个很好的媒介，与 JavaScript 非常一致的是 Dart 也使用 class 来定义一个类，使用 extends 来完成继承，与 JavaScript 不同的是 Dart 有更为丰富的功能； 234 | 235 | 构造函数 236 | 237 | *JavaScript* 238 | 239 | ```javascript 240 | class Icepy { 241 | constructor(a){ 242 | this.a = a; 243 | } 244 | } 245 | ``` 246 | 247 | *Dart* 248 | 249 | ```dart 250 | class Icepy { 251 | int a; 252 | Icepy(this.a); 253 | } 254 | ``` 255 | 256 | 调用父类 257 | 258 | *JavaScript* 259 | 260 | ```javascript 261 | class Icepy extends Ps{ 262 | constructor(a){ 263 | super(); 264 | this.a = a; 265 | } 266 | } 267 | ``` 268 | 269 | *Dart* 270 | 271 | ```dart 272 | class Employee extends Person { 273 | Employee() : super.fromJson(getDefaultData()); 274 | // ··· 275 | } 276 | ``` 277 | 278 | 构造函数参数默认值 279 | 280 | *JavaScript* 281 | 282 | ```javascript 283 | class Icepy { 284 | constructor(a = 1){ 285 | this.a = a; 286 | } 287 | } 288 | ``` 289 | 290 | *Dart* 291 | 292 | ```dart 293 | class Icepy { 294 | int a; 295 | Icepy({this.a = 1}); 296 | } 297 | 298 | void main() { 299 | final i = new Icepy(); 300 | print(i.a); 301 | } 302 | ``` 303 | 304 | 静态方法&静态属性 305 | 306 | *JavaScript* 307 | 308 | ```javascript 309 | class Icepy { 310 | static staticMethod() { 311 | return 'static method has been called.'; 312 | } 313 | } 314 | 315 | Icepy.xx = '1' 316 | Icepy.staticMethods = () => {} 317 | ``` 318 | 319 | *Dart* 320 | 321 | ```dart 322 | class Icepy{ 323 | static const initialCapacity = 16; 324 | static void say(){ 325 | print('1'); 326 | } 327 | } 328 | 329 | void main() { 330 | print(Icepy.initialCapacity); 331 | Icepy.say(); 332 | } 333 | ``` 334 | 335 | 命名构造函数 336 | 337 | *JavaScript* 338 | 339 | 无； 340 | 341 | *Dart* 342 | 343 | ```dart 344 | class Icepy { 345 | int a; 346 | Icepy({this.a = 1}); 347 | Icepy.stt(){ 348 | print('2'); 349 | } 350 | void say(){ 351 | print('3'); 352 | } 353 | } 354 | 355 | void main() { 356 | final d = Icepy.stt(); 357 | d.say(); 358 | } 359 | ``` 360 | 361 | 定义实例方法 362 | 363 | *JavaScript* 364 | 365 | ```javascript 366 | class Icepy { 367 | constructor(a=1){ 368 | this.a = a; 369 | } 370 | 371 | say(){ 372 | console.log(this.a); 373 | } 374 | } 375 | ``` 376 | 377 | *Dart* 378 | 379 | ```dart 380 | class Icepy { 381 | int a; 382 | Icepy({this.a = 1}); 383 | 384 | void say(){ 385 | print(this.a); 386 | } 387 | 388 | String backStr(){ 389 | return 'hello'; 390 | } 391 | } 392 | 393 | void main() { 394 | final i = new Icepy(); 395 | i.say(); 396 | } 397 | ``` 398 | 399 | Factory 关键字修饰的工厂函数 400 | 401 | *JavaScript* 402 | 403 | 无； 404 | 405 | *Dart* 406 | 407 | ```dart 408 | class Logger { 409 | final String name; 410 | bool mute = false; 411 | static final Map _cache = 412 | {}; 413 | 414 | factory Logger(String name) { 415 | if (_cache.containsKey(name)) { 416 | return _cache[name]; 417 | } else { 418 | final logger = Logger._internal(name); 419 | _cache[name] = logger; 420 | return logger; 421 | } 422 | } 423 | 424 | Logger._internal(this.name); 425 | 426 | void log(String msg) { 427 | if (!mute) print(msg); 428 | } 429 | } 430 | 431 | void main() { 432 | var logger = Logger('UI'); 433 | logger.log('Button clicked'); 434 | } 435 | ``` 436 | 437 | Getter&Setter 438 | 439 | *JavaScript* 440 | 441 | ```javascript 442 | class Square{ 443 | constructor(length) { 444 | this.name = 'Square'; 445 | } 446 | get area() { 447 | return 2*2; 448 | } 449 | set area(value) { 450 | this._area = value; 451 | } 452 | } 453 | ``` 454 | 455 | *Dart* 456 | 457 | ```dart 458 | class Rectangle { 459 | num left, top, width, height; 460 | Rectangle(this.left, this.top, this.width, this.height); 461 | num get right => left + width; 462 | set right(num value) => left = value - width; 463 | num get bottom => top + height; 464 | set bottom(num value) => top = value - height; 465 | } 466 | 467 | void main() { 468 | var rect = Rectangle(3, 4, 20, 15); 469 | print(rect.left == 3); 470 | rect.right = 12; 471 | print(rect.left == -8); 472 | } 473 | 474 | ``` 475 | 476 | 抽象类&抽象方法 477 | 478 | *JavaScript* 479 | 480 | 无； 481 | 482 | *Dart* 483 | 484 | ```dart 485 | abstract class Doer{ 486 | void doing(); 487 | } 488 | 489 | class EffeDoer extends Doer{ 490 | void doing(){ 491 | 492 | } 493 | } 494 | ``` 495 | 496 | 抽象方法特别适合用于让实现者实现的某些事情； 497 | 498 | 重写 499 | 500 | *JavaScript* 501 | 502 | ```javascript 503 | 504 | class B { 505 | say(){ 506 | console.log(1) 507 | } 508 | } 509 | 510 | 511 | class A extends B { 512 | say(){ 513 | console.log(2) 514 | } 515 | } 516 | 517 | new A().say(); 518 | ``` 519 | 520 | *Dart* 521 | 522 | ```dart 523 | 524 | class ICe { 525 | void say(){ 526 | print(2); 527 | } 528 | } 529 | 530 | class ICCC extends ICe { 531 | @override 532 | say(){ 533 | print(1); 534 | } 535 | } 536 | 537 | void main(){ 538 | new ICCC().say(); 539 | } 540 | 541 | ``` 542 | 543 | 接口 544 | 545 | *JavaScript* 546 | 547 | 无； 548 | 549 | *Dart* 550 | 551 | ```dart 552 | class Person { 553 | final _name; 554 | Person(this._name); 555 | String greet(String who) => 'Hello, $who. I am $_name.'; 556 | } 557 | 558 | class Impostor implements Person { 559 | get _name => ''; 560 | 561 | String greet(String who) => 'Hi $who. Do you know who I am?'; 562 | } 563 | 564 | String greetBob(Person person) => person.greet('Bob'); 565 | 566 | void main() { 567 | print(greetBob(Person('Kathy'))); 568 | print(greetBob(Impostor())); 569 | } 570 | ``` 571 | 572 | ## 异步 573 | 574 | 对于现代 JavaScript 来说它的异步基石是 Promise ，那么在 Dart 中也有对应的方案，并且还有更有效的方式，比如 Stream，async await。 575 | 576 | Promise & Futrue 577 | 578 | *JavaScript* 579 | 580 | ```javascript 581 | new Promise((resolve, reject) => { 582 | resolve(1) 583 | }).then((ddd) => { 584 | console.log(ddd); 585 | }) 586 | ``` 587 | 588 | *Dart* 589 | 590 | ```dart 591 | import 'dart:async'; 592 | 593 | void main(){ 594 | Future doing() async{ 595 | return 'icepy'; 596 | } 597 | Future dingFuture = new Future(doing); 598 | dingFuture.then((ddd){ 599 | print(ddd); 600 | }); 601 | } 602 | ``` 603 | 604 | async & await 605 | 606 | *JavaScript* 607 | 608 | ```javascript 609 | async function a(){ 610 | const d = await b(); 611 | } 612 | ``` 613 | 614 | *Dart* 615 | 616 | ```dart 617 | 618 | doing() async { 619 | String d = await callStr(); 620 | } 621 | 622 | ``` 623 | 624 | 当然 JavaScript 也有很多它比较独特的特性，这就不一一列举了，更多的 Dart 特性需要你在使用的过程中慢慢学习了，当我们使用 Flutter 的过程中 @override 也许是我们使用的最多的特性之一。 -------------------------------------------------------------------------------- /doc/basics/u_t_statefulwidget.md: -------------------------------------------------------------------------------- 1 | ## 编写你的第一个 StatefulWidget 2 | 3 | 前面一篇文章描写了一个打印hello的StatelessWidget的封装，接下来我们应该了解该如何封装一个简单的StatefulWidget，来驱动一次交互，这个交互的过程，会执行一次onPressed来更新一个image头像。我用一个这样的例子，想描述出来，我们该如何在应用中，完成自己的StatefulWidget设计。 4 | 5 | ![](../images/flutter-10.gif) 6 | 7 | 让我们先来定义一个AVUpdateState 和 AVUpdate ，绘制一个垂直居中的图片和按钮，_avImage变量来接收从网络获取的图片，setState这个_avImage 来更新UI。如果你对 React 很熟悉，那么这个过程和调用 React setState 非常的像。 8 | 9 | ```dart 10 | class AVUpdate extends StatefulWidget { 11 | @override 12 | AVUpdateState createState() => new AVUpdateState(); 13 | } 14 | 15 | class AVUpdateState extends State {}; 16 | ``` 17 | 18 | 定义 _avImage，它是一个 String 类型；不过，我们应该让它看起来是一个App，给它一个appBar并且赋值一个标题 My Update Image。 19 | 20 | ```dart 21 | class AVUpdateState extends State { 22 | String _avImage = ''; 23 | 24 | @override 25 | Widget build(BuildContext context) { 26 | return new Scaffold( 27 | appBar: new AppBar( 28 | title: new Text( 29 | 'My Image Update' 30 | ), 31 | ) 32 | ); 33 | } 34 | }; 35 | ``` 36 | 37 | 接下来，我们定义一个私有的Widget _buildContainer ，在这个 Widget 中，我们要使用 Center 让图片居中，OutlineButton 来将 update 按钮显示出来，并且给它一些样式，最后将 _buildContainer 赋值给 body，就如： 38 | 39 | ```dart 40 | class AVUpdateState extends State { 41 | 42 | String _avImage = ''; 43 | 44 | @override 45 | Widget build(BuildContext context) { 46 | return new Scaffold( 47 | appBar: new AppBar( 48 | title: new Text( 49 | 'My Image Update' 50 | ), 51 | ), 52 | body: _buildContainer(context), 53 | ); 54 | } 55 | 56 | Widget _buildContainer(BuildContext context){ 57 | return new Column( 58 | children: [ 59 | new Center( 60 | child: new Container( 61 | width: 100, 62 | height: 100, 63 | padding: new EdgeInsets.all(5.0), 64 | child: new Image.network(_avImage), 65 | ), 66 | ), 67 | new Row( 68 | children: [ 69 | new Expanded( 70 | child: new OutlineButton( 71 | borderSide:new BorderSide(color: Theme.of(context).primaryColor), 72 | child: new Text('update',style: new TextStyle(color: Theme.of(context).primaryColor),), 73 | onPressed: (){ 74 | // 75 | }, 76 | ) 77 | ), 78 | ], 79 | ) 80 | ], 81 | ); 82 | } 83 | } 84 | ``` 85 | 86 | 最后，在 onPressed 中调用 setState 方法来更新UI； 87 | 88 | ```dart 89 | setState(() { 90 | _avImage = 'https://avatars3.githubusercontent.com/u/3321837?s=460&v=4'; 91 | }); 92 | ``` 93 | 94 | Flutter 定义的 Image 可以获取四种资源，由于这里我们是从网络中获取，因此很便捷的就使用了 Image.network 来展示图片。 -------------------------------------------------------------------------------- /doc/images/flutter-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-0.png -------------------------------------------------------------------------------- /doc/images/flutter-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-1.png -------------------------------------------------------------------------------- /doc/images/flutter-10.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-10.gif -------------------------------------------------------------------------------- /doc/images/flutter-11.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-11.gif -------------------------------------------------------------------------------- /doc/images/flutter-12.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-12.jpeg -------------------------------------------------------------------------------- /doc/images/flutter-13.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-13.jpeg -------------------------------------------------------------------------------- /doc/images/flutter-14.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-14.jpeg -------------------------------------------------------------------------------- /doc/images/flutter-15.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-15.jpeg -------------------------------------------------------------------------------- /doc/images/flutter-16.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-16.jpeg -------------------------------------------------------------------------------- /doc/images/flutter-17.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-17.jpeg -------------------------------------------------------------------------------- /doc/images/flutter-18.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-18.gif -------------------------------------------------------------------------------- /doc/images/flutter-19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-19.png -------------------------------------------------------------------------------- /doc/images/flutter-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-2.png -------------------------------------------------------------------------------- /doc/images/flutter-20.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-20.gif -------------------------------------------------------------------------------- /doc/images/flutter-21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-21.png -------------------------------------------------------------------------------- /doc/images/flutter-22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-22.png -------------------------------------------------------------------------------- /doc/images/flutter-23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-23.png -------------------------------------------------------------------------------- /doc/images/flutter-24.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-24.gif -------------------------------------------------------------------------------- /doc/images/flutter-25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-25.png -------------------------------------------------------------------------------- /doc/images/flutter-26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-26.png -------------------------------------------------------------------------------- /doc/images/flutter-27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-27.png -------------------------------------------------------------------------------- /doc/images/flutter-28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-28.png -------------------------------------------------------------------------------- /doc/images/flutter-29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-29.png -------------------------------------------------------------------------------- /doc/images/flutter-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-3.png -------------------------------------------------------------------------------- /doc/images/flutter-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-30.png -------------------------------------------------------------------------------- /doc/images/flutter-31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-31.png -------------------------------------------------------------------------------- /doc/images/flutter-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-32.png -------------------------------------------------------------------------------- /doc/images/flutter-33.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-33.png -------------------------------------------------------------------------------- /doc/images/flutter-34.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-34.png -------------------------------------------------------------------------------- /doc/images/flutter-35.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-35.png -------------------------------------------------------------------------------- /doc/images/flutter-36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-36.png -------------------------------------------------------------------------------- /doc/images/flutter-37.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-37.png -------------------------------------------------------------------------------- /doc/images/flutter-38.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-38.png -------------------------------------------------------------------------------- /doc/images/flutter-39.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-39.png -------------------------------------------------------------------------------- /doc/images/flutter-4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-4.gif -------------------------------------------------------------------------------- /doc/images/flutter-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-40.png -------------------------------------------------------------------------------- /doc/images/flutter-41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-41.png -------------------------------------------------------------------------------- /doc/images/flutter-42.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-42.png -------------------------------------------------------------------------------- /doc/images/flutter-43.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-43.gif -------------------------------------------------------------------------------- /doc/images/flutter-44.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-44.gif -------------------------------------------------------------------------------- /doc/images/flutter-45.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-45.gif -------------------------------------------------------------------------------- /doc/images/flutter-46.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-46.png -------------------------------------------------------------------------------- /doc/images/flutter-47.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-47.png -------------------------------------------------------------------------------- /doc/images/flutter-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-48.png -------------------------------------------------------------------------------- /doc/images/flutter-49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-49.png -------------------------------------------------------------------------------- /doc/images/flutter-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-5.jpeg -------------------------------------------------------------------------------- /doc/images/flutter-50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-50.png -------------------------------------------------------------------------------- /doc/images/flutter-51.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-51.png -------------------------------------------------------------------------------- /doc/images/flutter-52.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-52.gif -------------------------------------------------------------------------------- /doc/images/flutter-53.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-53.gif -------------------------------------------------------------------------------- /doc/images/flutter-54.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-54.gif -------------------------------------------------------------------------------- /doc/images/flutter-55.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-55.gif -------------------------------------------------------------------------------- /doc/images/flutter-56.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-56.gif -------------------------------------------------------------------------------- /doc/images/flutter-57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-57.png -------------------------------------------------------------------------------- /doc/images/flutter-58.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-58.png -------------------------------------------------------------------------------- /doc/images/flutter-59.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-59.png -------------------------------------------------------------------------------- /doc/images/flutter-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-6.jpeg -------------------------------------------------------------------------------- /doc/images/flutter-60.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-60.gif -------------------------------------------------------------------------------- /doc/images/flutter-61.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-61.png -------------------------------------------------------------------------------- /doc/images/flutter-62.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-62.png -------------------------------------------------------------------------------- /doc/images/flutter-63.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-63.png -------------------------------------------------------------------------------- /doc/images/flutter-64.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-64.gif -------------------------------------------------------------------------------- /doc/images/flutter-65.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-65.png -------------------------------------------------------------------------------- /doc/images/flutter-66.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-66.png -------------------------------------------------------------------------------- /doc/images/flutter-67.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-67.gif -------------------------------------------------------------------------------- /doc/images/flutter-68.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-68.gif -------------------------------------------------------------------------------- /doc/images/flutter-69.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-69.png -------------------------------------------------------------------------------- /doc/images/flutter-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-7.jpeg -------------------------------------------------------------------------------- /doc/images/flutter-70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-70.png -------------------------------------------------------------------------------- /doc/images/flutter-71.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-71.gif -------------------------------------------------------------------------------- /doc/images/flutter-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-72.png -------------------------------------------------------------------------------- /doc/images/flutter-8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-8.jpeg -------------------------------------------------------------------------------- /doc/images/flutter-9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter-9.jpeg -------------------------------------------------------------------------------- /doc/images/flutter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter.jpg -------------------------------------------------------------------------------- /doc/images/flutter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightningminers/flutter-book/fcbf52cd783b6e66085e6bf63469a70195cba4b1/doc/images/flutter.png -------------------------------------------------------------------------------- /doc/native/archive_ios.md: -------------------------------------------------------------------------------- 1 | ## 将 Flutter 应用发布到 iOS 平台 2 | 3 | > 默认你已经准备好了 Apple 开发者账户，并且已经在 App Store Connect 中创建了你的应用。 4 | 5 | 当你开发完成你的应用时，此刻要么将它发布在测试网络提供给你的朋友们去测试，要么发布到 App Store 让广大人民群众下载安装，在此之前你可能还需要做一些准备工作，考虑到未来我们会做一个演示应用，因此就直接使用它来做演示了，我也做一张 gif 动画让大家查看： 6 | 7 | ![](../images/flutter-71.gif) 8 | 9 | 在 ios 目录下打开 Runner.xcworkspace，基本上你需要改动的地方可能有： 10 | 11 | - Display Name 也就是你的应用名称 12 | - Bundle identifier 唯一的 bundle ID 13 | - Signing 部分应该选择你的发布证书 14 | - Deployment Info 中你可以选择的有支持的系统版本，仅iPhone吗等等一系列的选项 15 | - 在 Assets.xcassets 中更换你应用的图标 16 | 17 | 然后 Run 起来，你即将得到如下图的效果： 18 | 19 | ![](../images/flutter-72.png) 20 | 21 | 最后如果你想发布到 App Store 可以在菜单栏上的 Product -> Archive 做一份构建，选择你要发布的版本最后点击下一步即可，这一个过程 Xcode 会自动帮你完成。 -------------------------------------------------------------------------------- /doc/native/bridge_ios.md: -------------------------------------------------------------------------------- 1 | ## 谈谈 Flutter 的通信和插件 2 | 3 | 对于跨平台的方案来说通信是其非常重要的一个基础，官网贴了一张很直观的图，让我们可以了解其架构。 4 | 5 | ![](../images/flutter-21.png) 6 | 7 | 整个插件的消息和响应以异步的方式进行传递，以确保用户界面不会卡顿； 8 | 9 | 从上述的架构图中，其实已经很明确的知道了在 Dart 端使用 MethodChannel API 来发送消息或调用对应的方法，而 Native 平台上 Android 的 MethodChannel 和 iOS 的 FlutterMethodChannel 处理了接收调用和返回结果，这一过程也可以反向调用，即 Native 主动的给 Dart 端发送消息，如果你有兴趣不妨看一个插件的实现 [https://pub.dartlang.org/packages/quick_actions](https://pub.dartlang.org/packages/quick_actions)，它很直白的实现了这样的过程。对于数据转换的过程，如果你了解过 JavaScriptCore 和 Objective-C 的互转就能明白，比如 JavaScript 端的 string 转换成 Objective-C 的NSString，number 转换成 NSNumber。对于 Dart 而言也有这样数据转换的对照表，你可以参考 [https://flutter.io/docs/development/platform-integration/platform-channels](https://flutter.io/docs/development/platform-integration/platform-channels)，不难讲述的特别清楚。 10 | 11 | 接下来让我以 iOS 视角写一个简单的插件让大家能很直白的了解到 Dart 和 Native 的通信过程，并且这也是写插件非常有用的方式，你可以利用 flutter 提供的命名行来初始化一个模板项目： 12 | 13 | ```bash 14 | $ flutter create --org com.example.icepy --template=plugin icepyfetch 15 | ``` 16 | 17 | 首先我们在 Dart 端导入 import 'package:flutter/services.dart' 模块利用 MethodChannel 来创建连接的通道： 18 | 19 | ```dart 20 | class IcepyFetch { 21 | static const MethodChannel _channel = const MethodChannel('icepy.fetch'); 22 | } 23 | ``` 24 | 25 | > 连接通道的名需要保持唯一性 26 | 27 | 接着我们可以利用 Futrue 来写一个简单的方法，这个方法从 Native 端获取 iOS 的版本号： 28 | 29 | ```dart 30 | static Future get platformVersion async { 31 | final String version = await _channel.invokeMethod('getPlatformVersion'); 32 | return version; 33 | } 34 | ``` 35 | 36 | 接下来我们在 iOS 端实现 FlutterPlugin 协议的 + (void)registerWithRegistrar:(NSObject*)registrar ： 37 | 38 | ```Objective-C 39 | // .h 文件 40 | #import 41 | 42 | @interface IcepyFetchPlugin : NSObject 43 | @end 44 | 45 | // .m 文件 46 | 47 | #import "IcepyFetchPlugin.h" 48 | 49 | @implementation IcepyFetchPlugin 50 | + (void)registerWithRegistrar:(NSObject*)registrar { 51 | FlutterMethodChannel* channel = [FlutterMethodChannel 52 | methodChannelWithName:@"icepy.fetch" 53 | binaryMessenger:[registrar messenger]]; 54 | IcepyFetchPlugin* instance = [[IcepyFetchPlugin alloc] init]; 55 | [registrar addMethodCallDelegate:instance channel:channel]; 56 | } 57 | 58 | @end 59 | ``` 60 | 61 | 你在 Dart 端创建的 icepy.fetch 通道名，也需要使用 FlutterMethodChannel 来创建 Native 端的通道名。 62 | 63 | 接下来，我们继续实现另外一个方法 - (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result，由于我们在 Dart 端 invokeMethod 的方法名叫 getPlatformVersion ，因此在这个方法中每一次的通信 Flutter 都会传递一个 FlutterMethodCall类型对象给你使用，在method属性中，你可以获取到从 Dart 端发送过来的方法名： 64 | 65 | ```Objective-C 66 | - (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result { 67 | if ([@"getPlatformVersion" isEqualToString:call.method]) { 68 | result([@"iOS " stringByAppendingString:[[UIDevice currentDevice] systemVersion]]); 69 | } else { 70 | result(FlutterMethodNotImplemented); 71 | } 72 | } 73 | ``` 74 | 75 | 当你测试过没有问题之后就可以利用另外一个命令让这个插件发布到 Package 市场中： 76 | 77 | ```bash 78 | $ flutter packages pub publish 79 | ``` 80 | 81 | 等待发布成功之后你可以将 package 名写入 pubspec.yaml 的 dependencies，一般情况下你使用 AS 或者 VSCode 保存配置文件即可，能自动安装你发布的 package，但是如果你想在开发阶段进行测试，也可以将你的 package 写在 dev_dependencies 中，指定你的 path 路径即可。 82 | 83 | 让我们最后来看一看，在业务代码里该如何使用 icepy.fetch package 来获取 Native 平台版本号。 84 | 85 | ```dart 86 | import 'package:icepyfetch/main.dart' 87 | 88 | Future fetchVersionState() async { 89 | String version; 90 | try { 91 | version = await IcepyFetch.platformVersion; 92 | } on PlatformException { 93 | version = 'Failed to get platform version.'; 94 | } 95 | if (!mounted) return; 96 | setState(() { 97 | _version = version; 98 | }); 99 | } 100 | ``` -------------------------------------------------------------------------------- /doc/native/integrated_ios_flutter.md: -------------------------------------------------------------------------------- 1 | ## 将 Flutter 集成到已有的iOS工程中 2 | 3 | ![](../images/flutter-20.gif) 4 | 5 | 我可能需要做一个假设你已有的iOS工程路径在 ~/integratedFlutter 目录中，你需要在这个目录里创建 Flutter 的模块： 6 | 7 | ```bash 8 | $ cd ~/integratedFlutter 9 | $ flutter create -t module my_flutter 10 | ``` 11 | 12 | 在 my_flutter 目录中 flutter 会创建一些 Dart 代码，一些 Ruby脚本，启动项以及一个隐藏的.ios子目录。 13 | 14 | 接着在你的 Podfile 文件中添加 Flutter 提供好的脚本： 15 | 16 | ```bash 17 | platform :ios, '8.0' 18 | 19 | target 'integratedFlutter' do 20 | flutter_application_path = '/Users/xiangwenwen/integratedFlutter/my_flutter/' 21 | eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding) 22 | end 23 | ``` 24 | 25 | 其实这一行脚本会从.ios目录中安装 Flutter 的引擎。 26 | 27 | ```bash 28 | $ pod install 29 | ``` 30 | 31 | 等待安装完成。 32 | 33 | 使用 Xcode 打开 integratedFlutter.xcworkspace，在 Build Phases 中创建一个新的 Script Phases ，将如下两行粘贴到 Shell 中： 34 | 35 | ```bash 36 | "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build 37 | "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed 38 | ``` 39 | 40 | 最后将 Build Settings -> Build Options -> Enable Bitcode 设置为 No，运行 command + b 编译工程，至此工程的配置就已经完成了，接下来需要在代码中将 Flutter 的引擎使用起来。 41 | 42 | 打开你的 AppDelegate.h ，修改如下： 43 | 44 | ```Objective-C 45 | #import 46 | #import 47 | 48 | @interface AppDelegate : FlutterAppDelegate 49 | 50 | @property (nonatomic,strong) FlutterEngine *flutterEngine; 51 | 52 | @end 53 | ``` 54 | 55 | AppDelegate.m 文件，修改如下： 56 | 57 | ```Objective-C 58 | #import 59 | 60 | @implementation AppDelegate 61 | 62 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { 63 | // Override point for customization after application launch. 64 | self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil]; 65 | [self.flutterEngine runWithEntrypoint:nil]; 66 | [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine]; 67 | return [super application:application didFinishLaunchingWithOptions:launchOptions]; 68 | } 69 | 70 | @end 71 | ``` 72 | 73 | GeneratedPluginRegistrant 是用于你添加了 Flutter 的插件； 74 | 75 | 接着，我们来定义一个 ViewController，将 FlutterViewController 添加进去： 76 | 77 | ```Objective-C 78 | 79 | #import 80 | #import "AppDelegate.h" 81 | #import "ViewController.h" 82 | 83 | @interface ViewController () 84 | 85 | @end 86 | 87 | @implementation ViewController 88 | 89 | - (void)viewDidLoad { 90 | [super viewDidLoad]; 91 | // Do any additional setup after loading the view, typically from a nib. 92 | [super viewDidLoad]; 93 | UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; 94 | [button addTarget:self 95 | action:@selector(handleButtonAction) 96 | forControlEvents:UIControlEventTouchUpInside]; 97 | [button setTitle:@"Press me" forState:UIControlStateNormal]; 98 | [button setBackgroundColor:[UIColor blueColor]]; 99 | button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0); 100 | [self.view addSubview:button]; 101 | } 102 | 103 | - (void)handleButtonAction { 104 | FlutterEngine *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine]; 105 | FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil]; 106 | [self presentViewController:flutterViewController animated:false completion:nil]; 107 | } 108 | 109 | @end 110 | ``` 111 | 112 | 现在我们可以进入之前创建的my_flutter目录运行： 113 | 114 | ```bash 115 | $ cd ~/my_flutter 116 | $ flutter attach 117 | ``` 118 | 119 | 最后在 Xcode 中 command + R 将工程重新跑起来。 -------------------------------------------------------------------------------- /doc/preface.md: -------------------------------------------------------------------------------- 1 | 抛开语言不谈，对于想快速开发的同学来说，我把 Flutter 最核心的业务要素提炼成了三个部分，它们分别是 布局 ，交互，和 bridge，当我们比较注重更细节的组合时，你的应用会更细腻入微而已，在此之前它们会是贯穿你学习周期的全部； 2 | 3 | ## 布局 4 | 5 | ![](./images/flutter-0.png) 6 | 7 | 如果有一个这样的经典排版，在 Flutter 中存在四种布局模型，当我们拿到这样一个页面时，我们该如何分布？蓝色的代表一个 Row ，也就是横向排列，每一张图片都有等比的间距，因此红色区域代表了一个 Container 来绘制边距，整体的蓝色外部还有一个竖向排列的 Column 。 8 | 9 | ![](./images/flutter-1.png) 10 | 11 | 那么再让我们分解一下nav的布局排列，一组四个文字的 Row （黄色），一个绿色的 Container 包含之间的间距，一个橘红色的文字和_ 竖向排列，一个 Column。我们可以把它理解为一个弹性布局的模型，我们通过这些排列的方式来完成布局，更细节的问题，也可以依次展开；在 Flutter 中有一套丰富的 widget 来完成布局，通过不同的组合使用，能达到你的预期。这是一种布局设计的方式，除了弹性布局之外，还有绝对定位式的布局，如： 12 | 13 | ![](./images/flutter-2.png) 14 | 15 | Stack 是一种绝对布局的widget，利用它可以叠加到其他的widget上，来达到你想要的目的。那么其实，这些widget有很多布局的约束，如Center等等。你可以想象一下，任何函数都会有一个入口RUN，Flutter也不例外，当我们将这些元素视为一颗树时，我们就能明白，其实当我们在绘制UI时要更多的考虑，如何用代码去完成这颗树，想象一下，当我们完成一个 transform ，利用 React 来描述 UI，最终生成一颗 Flutter 的UI层级，这也不是问题； 16 | 17 | ## 交互 18 | 19 | 几乎目前大部分绘制UI交互的设计，都有一种数据驱动的逻辑，框架在接收到数据的变更时，会启动一次diff的比对，将变动的UI进行重新绘制，一个很简单的例子，如： 20 | 21 | ![](./images/flutter-3.png) 22 | 23 | 当你在Input框中输入一个文本，它的逻辑可能如下： 24 | 25 | ```javascript 26 | inputValue = ""; 27 | 28 | onChange(e){ 29 | setState({ 30 | inputValue: e.target.value 31 | }); 32 | } 33 | ``` 34 | 35 | 当然这也意味着，在你设计你的应用交互时，需要着重的考虑，你的state会有哪些属性，这些属性在变更时会触发Flutter的updater来绘制UI，这个过程非常类似 React 中的 diff 以及 setState 方法；当然大部分的时候交互是一种人机的互动，有事件，有手势，这一部分很有趣的设计是，大部分需要你和stateful来结合设计，当你为一个图层监听上了一个onTap事件时，通过state 的驱动，来完成 UI 的绘制；GestureDetector它也是一个widget ，我们可以使用它来完成手势； 36 | 37 | ## bridge 38 | 39 | 不管是任何一个混合开发的解决方案，基本上都是在UI层面去完成跨平台，一次开发运行多处，但是当你需要完成特定的功能时，比如：打开相册获取照片，这在这一层面上就无法撼动了，你依然需要使用 Native 的方式来完成，唯一不同的时，通信的设计为这样的交互带来了便利，我们统称为 bridge ，在这样的模式中，我们可以为各种特定的平台来完成特定的功能； 40 | 41 | ```javascript 42 | { 43 | id: "xxx", 44 | module: "query" 45 | method: "findP", 46 | callbackId: "xxxxxxxx" 47 | } 48 | ``` 49 | 50 | 大体上你会设计一个这样的通信协议，module 是你定义的模块名称，method 是你要执行的方法，callbackId 是你已经在 native 层面注册的可交互的 函数id，这个id用于最后交互时找到这个函数，并把数据提交给混合开发的 UI 层面。Flutter 也设计了这样一套通信的bridge ，开放了接口，让native的某些功能可以特定的实现，多数情况我们仅仅只需要一丢丢； -------------------------------------------------------------------------------- /doc/upday/bloc.md: -------------------------------------------------------------------------------- 1 | ## 在 Flutter 中使用 Bloc 来处理数据并更新 UI 2 | 3 | 这是一种设计模式，由 paolo soares 和 cong hui 在2018年Google dartconf上提出，具体可参看 [https://www.youtube.com/watch?v=PLHln7wHgPE](https://www.youtube.com/watch?v=PLHln7wHgPE)，Bloc 是英文 Business Logic Component 的缩写，基本从字面的意思上来看，它是一种面向组件和业务逻辑的分离的优雅策略，通常我习惯性的将设计模式称之为一种策略。 4 | 5 | 且让我们看一个效果图： 6 | 7 | ![](../images/flutter-68.gif) 8 | 9 | 上图的例子已经用 Bloc 模式重写，且让我们从一张图中了解一下，这种设计模式的特点： 10 | 11 | ![](../images/flutter-69.png) 12 | 13 | 我们可以把 Bloc 做为一个管道，在这个管道中流（数据）的驱动方式为我们生动的展示了分离的策略。那么相比之下复杂的业务逻辑中应用 Bloc 我们能得到多少收益？ 14 | 15 | - 业务逻辑和 Widget 的分离 16 | - 可单独测试业务逻辑 17 | - 可更好的重用业务逻辑代码 18 | 19 | Bloc 侧重于利用 Stream 来设计符合上述策略的代码，数据从 Bloc 而来，从 Stream 而出，最后落地到更新 Widget 上。既然提到了 Stream ，那么让我们来设计一个最小的 Bloc 来完成这个设计。 20 | 21 | 先定义一个抽象类： 22 | 23 | ```dart 24 | abstract class BlocBase{ 25 | void dispose(); 26 | } 27 | ``` 28 | 29 | dispose 方法可用于 Widget 释放时能关闭 Stream。 30 | 31 | 然后我们需要设计一个 BlocProvider StatefulWidget 来处理数据，它接收两个参数： 32 | 33 | - bloc 对象 34 | - child 子 Widget 35 | 36 | ```dart 37 | class BlocProvider extends StatefulWidget{ 38 | 39 | final T bloc; 40 | final Widget child; 41 | 42 | BlocProvider({ 43 | Key key, 44 | @required this.child, 45 | @required this.bloc, 46 | }) : super(key: key); 47 | 48 | @override 49 | _BlocProviderState createState() => new _BlocProviderState(); 50 | 51 | static Type _typeOf() => T; 52 | 53 | static T of(BuildContext context){ 54 | final type = _typeOf>(); 55 | BlocProvider provider = context.ancestorWidgetOfExactType(type); 56 | return provider.bloc; 57 | } 58 | } 59 | 60 | class _BlocProviderState extends State>{ 61 | @override 62 | void dispose(){ 63 | widget.bloc.dispose(); 64 | super.dispose(); 65 | } 66 | 67 | @override 68 | Widget build(BuildContext context) { 69 | return widget.child; 70 | } 71 | } 72 | ``` 73 | 74 | 作为一个很抽象的入口，其实我们并不知道传入的类型是什么，因此我们需要借助范型来完成对类型的限定。在 State 中实现 dispose 方法用于将来实现关闭 Stream。 75 | 76 | 在我们重点需要关注的地方是对于出口和入口（Stream），我们应该初始化两个 StreamController 来控制这样的情况，利用 sink 来添加数据，利用 stream 来将数据从出口流出。在我们的那个例子里，为了能点击按钮自增，因此我利用了 outCount 来代表出口，updateCount 来代表入口： 77 | 78 | ```dart 79 | class AVBlocData implements BlocBase { 80 | int _count; 81 | 82 | StreamController _countController = new StreamController(); 83 | StreamSink get _inadd => _countController.sink; 84 | Stream get outCount => _countController.stream; 85 | 86 | StreamController _actionController = new StreamController(); 87 | StreamSink get updateCount => _actionController.sink; 88 | 89 | AVBlocData(){ 90 | _count = 0; 91 | _actionController.stream.listen(_handleLogic); 92 | } 93 | 94 | void _handleLogic(data){ 95 | _count = data + 1; 96 | _inadd.add(_count); 97 | } 98 | 99 | void dispose(){ 100 | _countController.close(); 101 | _actionController.close(); 102 | } 103 | } 104 | ``` 105 | 106 | 写到这里我们设计的 Bloc 类就基本成型了，但对于更新 Widget 来说它还少了一些东西，这个东西是如何将 Widget 与 Stream bind在一起的 Widget，我们会用 StreamBuilder 来完成它。 107 | 108 | ```dart 109 | import 'package:flutter/material.dart'; 110 | import 'package:my_flutter_app/bloc/AVBlocData.dart'; 111 | 112 | int i = 0; 113 | 114 | class AVBlocPage extends StatelessWidget{ 115 | @override 116 | Widget build(BuildContext context) { 117 | final AVBlocData bloc = BlocProvider.of(context); 118 | return new Scaffold( 119 | appBar: new AppBar( 120 | title: new Text('AVBloc'), 121 | ), 122 | body: new Center( 123 | child: StreamBuilder( 124 | stream: bloc.outCount, 125 | initialData: 0, 126 | builder: (BuildContext context, AsyncSnapshot snapshot){ 127 | return new Text('You hit me:${snapshot.data} times'); 128 | }, 129 | ), 130 | ), 131 | floatingActionButton: FloatingActionButton( 132 | child: new Icon(Icons.add), 133 | onPressed: (){ 134 | bloc.updateCount.add(i++); 135 | }, 136 | ), 137 | ); 138 | } 139 | } 140 | 141 | class AVBloc extends StatelessWidget { 142 | @override 143 | Widget build(BuildContext context) { 144 | return new MaterialApp( 145 | home: BlocProvider( 146 | bloc: new AVBlocData(), 147 | child: AVBlocPage() 148 | ), 149 | ); 150 | } 151 | } 152 | ``` 153 | 154 | 在整个 Bloc 的设计中，其实你能看见就是利用了 StreamController 和 StreamBuilder 来完成 Widget 的更新，但不过 Bloc 让你的设计可以从 Widget 中分离到别的文件，这种抽离为你的业务逻辑自动化测试做好了准备。 155 | 156 | 那么对于 Bloc 实例来说它的传递方式可以有多种多样，最常见如上述的例子从父 Widget 而来，我们也可以利用 State 的 dispose 来关闭 Stream。其实我还可以利用前端 React Context 举一个一摸一样的例子，你完全可以将它看为只是一种 React Context 的实现（如果很难理解的话）。 -------------------------------------------------------------------------------- /doc/upday/debug.md: -------------------------------------------------------------------------------- 1 | ## Flutter 调试技巧 2 | 3 | 对于前端的同学在调试时我们有很多方式可以用，比如 Chrome Dev Tools ，你可以在 Elements 上调试布局和样式，也可以利用 console.log 来打印变量，当然也有较多的栈信息让你来判断错误和 debug，相应的 Flutter 也有很多调试技巧可以辅助我们更好的进行开发并解决问题。 4 | 5 | 当我们很难预估一个值时，最简单的方式是将这个值打印出来，通过控制台来查看输出的信息，由于我们使用了 Dart 来开发 Flutter ，因此我们可以使用 debugPrint 等同于 console.log 的方式来打印它。 6 | 7 | ![](../images/flutter-12.jpeg) 8 | 9 | 不过这种方式在复杂的场景中就显得效率低下，并且有可能会打击你的信心。当然调试做为一个工程师必备的手段，我们应该用更高效的方式和工具来辅助我们，一旦你养成了良好的习惯，这些辅助也是你深入bug原因的起点，为你的职业生涯添加浓厚的一笔资产。 10 | 11 | 对于语法和入门级的错误，不管是 VSCode 还是 Android Studio 都会通过标红的方式反馈给你，你可以根据编辑器或IDE给出的经典信息来做判断，这一阶段的实践也会为你写代码的严谨带来较多的思考。但是，当你遇见运行时的错误时，这样的方式可能就有一些力不从心了，不过，我们有一些其他的技巧来辅助你完成这些判断。 12 | 13 | 第一种方式是通过错误堆栈来定位具体的错误，对于这样的错误 Flutter 一般会给予一些经典的错误信息，多数情况下，你都可以通过 Google 完成排除错误的过程。当然如果遇见了复杂的错误，这种定位的方式就像是阅读一层又一层的树，在这颗树中，我们可以从最起始的位置开始，当它发生在什么地方，假设这个被你定义了一个复杂的函数来处理数据，我们可以在代码中阅读这一段函数的逻辑，通过数据的对比，来查找一些可能的处理逻辑错误。 14 | 15 | ![](../images/flutter-15.jpeg) 16 | 17 | 在这个错误中我们可以看见因为网络的问题抛出了一个 failed。 18 | 19 | 其次我们可以利用断点调试的功能，在VSCode的调试面板中，我们可以时时的查看变量的值，以及跟踪执行的步骤，在这个过程中，我们可以查看堆栈，也可以根据逻辑来做进一步的判断。 20 | 21 | ![](../images/flutter-13.jpeg) 22 | 23 | 多数情况下我们使用 Flutter 是来绘制 UI，界面的调试在 debug 模式下其实没有什么用，但是我们可以利用 VSCode 的 Toggle Debug Painting 来启动界面调试工具，通过这些辅助线我们可以很方便的查阅到为什么布局和我们的预期有所不同。 24 | 25 | ![](../images/flutter-14.jpeg) 26 | 27 | 当然在渲染层中，我们也可以通过debugDumpRenderTree()存渲染树，通过这颗树的仔细对比来定位问题，这些小小技巧多数情况下，是使用不上的。 28 | 29 | ![](../images/flutter-16.jpeg) 30 | 31 | 不过，如果遇到很棘手的问题，多数情况下我会使用 Android Studio 来完成调试，因为它提供的功能和工具，比之 VSCode 不知道增强了多少，就比如调试界面，我们可以在 Android Studio 中启动 Flutter Inspector 能看到一个完整的层级以及我们可以自由的选中某一层级； 32 | 33 | ![](../images/flutter-17.jpeg) 34 | 35 | 另外 Android Studio 中默认就安装了 Dart Analysis ，这个工具能辅助我们完成有问题代码的分析并且给出建议，当然VSCode中也有这样的功能，但是不知道为什么个人感觉Android Studio中提供的更完善和强大。如果你是Android 开发，在调试技巧这个层面上，我想你应该比前端开发人员拥有更多的优势，因为 Android Studio 做为你“吃饭”的家伙，肯定已经玩的很溜了。 36 | 37 | 说了这么多，调试最重要的还是细心和耐心，没有这两颗心，人一躁起来问题就很难解决了； 38 | 39 | > 善用 issues ，大部分问题都能在这里检索到答案。 40 | 41 | 举个例子当你使用 BottomNavigationBar 添加超过三个 items 时 navigation bar 会渲染成一个白板，如图： 42 | 43 | ![](../images/flutter-22.png) 44 | 45 | 其实答案就在 [https://github.com/flutter/flutter/issues/13642](https://github.com/flutter/flutter/issues/13642)； -------------------------------------------------------------------------------- /doc/upday/flex.md: -------------------------------------------------------------------------------- 1 | ## Flex 源码解读 2 | 3 | 你能通过源码看见 Row 和 Column 都继承了 Flex ，布局具体的计算都在这个类中，我们可以通过源码 [https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/basic.dart#L3434](https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/basic.dart#L3434) 了解一下 Flex 是如何计算布局的。 4 | 5 | Flex 构造函数 6 | 7 | ```dart 8 | Flex({ 9 | Key key, 10 | @required this.direction, 11 | this.mainAxisAlignment = MainAxisAlignment.start, 12 | this.mainAxisSize = MainAxisSize.max, 13 | this.crossAxisAlignment = CrossAxisAlignment.center, 14 | this.textDirection, 15 | this.verticalDirection = VerticalDirection.down, 16 | this.textBaseline, 17 | List children = const [], 18 | }) 19 | ``` 20 | 基本上默认值的设计不管是 Row 还是 Column 都遵循了 Flex 的设计，唯一相比之下只有 this.direction 参数是多余出来的一个，通过源码的注释我们可以了解到它是用于设置轴的排列方向。 21 | 22 | 我们通过 RenderFlex 可以找到 [https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/rendering/flex.dart#L635](https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/rendering/flex.dart#L635) performLayout ，基本上我们都能猜测到一开始肯定会遍历 child，我把一些无用的代码折叠了： 23 | 24 | ![](../images/flutter-39.png) 25 | 26 | 通过逻辑可以分析出通过_getFlex计算出flex的值，flex 值存在然后去找到最后一个存在 flex 值的 child，对于不包含 flex 值的 child 则设置它们的对齐方向。 27 | 28 | 接下来从 `final double freeSpace = math.max(0.0, (canFlex ? maxMainSize : 0.0) - allocatedSize);` 开始去计算包含 flex 的空间大小，然后根据 CrossAxisAlignment.baseline 对 child 进行调整，这一步结束之后开始按照主轴对齐的方式将 child 进行调整。 29 | 30 | ![](../images/flutter-40.png) 31 | 32 | 最后一步按照交叉轴进行设置调整 child 。 33 | 34 | ![](../images/flutter-41.png) -------------------------------------------------------------------------------- /doc/upday/mix.md: -------------------------------------------------------------------------------- 1 | ## 对于抽象 Widget 的意义 2 | 3 | 当我有一个 Widget 需要实现一些封装时，Flutter 官方推荐的设计其实和 React Props 非常像，并且你可以实现很早期的子 Widget 和 父 Widget 通信的过程，我想 mix 对于下一步我们抽象出自己的 Widget 封装并提交到仓库，让更多人使用你的 Widget，这会让你很有成就感。 4 | 5 | ![](../images/flutter-24.gif) 6 | 7 | 基于 AV... 的例子，我设计了一个小的 Widget AVTapbox，它有两个属性 active 和 onChanged，在父 Widget 中将这两个属性所要求的类型传递给 AVTapbox。你能在这个例子中如图所视点击文字来让文字变化，并且通过父 Widget 来管理这个过程。 8 | 9 | ```dart 10 | class AVTapbox extends StatefulWidget { 11 | AVTapbox({Key key, this.active: false, @required this.onChanged}) 12 | : super(key: key); 13 | 14 | final bool active; 15 | final ValueChanged onChanged; 16 | 17 | AVTabboxState createState() => AVTabboxState(); 18 | } 19 | ``` 20 | 21 | ```dart 22 | class AVTabboxState extends State { 23 | 24 | void _handleTap(){ 25 | widget.onChanged(!widget.active); 26 | } 27 | 28 | Widget build(BuildContext context) { 29 | return GestureDetector( 30 | onTap: _handleTap, 31 | child: Container( 32 | child: Center( 33 | child: Text( 34 | widget.active ? 'active' : 'inactive', 35 | style: TextStyle(fontSize: 32.0, color: Colors.blue), 36 | ), 37 | ), 38 | ), 39 | ); 40 | } 41 | } 42 | ``` 43 | 44 | 在这个例子中，我们可以通过 widget.onChanged 将参数传递给父 Widget。 45 | 46 | 在父 Widget 中我们同样需要设计一个属性和一个方法： 47 | 48 | ```dart 49 | class AVUpdateState extends State { 50 | bool _active = false; 51 | 52 | void _handleTapboxChanged(bool newValue) { 53 | setState(() { 54 | _active = newValue; 55 | }); 56 | } 57 | .... 58 | } 59 | ``` 60 | 61 | 让我们来导入 AVTapbox 模块来看看如何使用它： 62 | 63 | ```dart 64 | import 'package:my_flutter_app/AVTapbox.dart'; 65 | 66 | class AVUpdateState extends State { 67 | .... 68 | Widget _buildAVTapbox(BuildContext context) { 69 | return new AVTapbox( 70 | active: _active, 71 | onChanged: _handleTapboxChanged, 72 | ), 73 | } 74 | } 75 | ``` 76 | 77 | 这样的封装对于不写 AVTapbox Widget 的开发者来说，他们只需要关心 active 和 onChanged。因为多数情况下，开发者并不关心 AVTapbox Widget 实现的细节，我们可以将它打包成一个 package 提供给依赖你的开发者。 -------------------------------------------------------------------------------- /doc/upday/package_manage.md: -------------------------------------------------------------------------------- 1 | ## 详解 pubspec.yaml 包管理 2 | 3 | Flutter 沿用了 Dart 生态系统来进行包的管理，pubspec.yaml 就如同 Node.js 的 package.json 文件，只不过 pubspec.yaml 的语法可能稍微让我们感到诧异。在 Node.js 的生态里，如果你想安装一些包，需要输入 npm install，但在 Flutter 里需要使用 flutter packages get 来安装；和 package.json 一样 pubspec.yaml 也分离了两个环境，可用于开发者在不同的环境下进行开发，dependencies 和 dev_dependencies ，多数情况下，如果你有自己的包需要开发，那么你可以在主工程里的 dev_dependencies 中引入你正在开发的包。 4 | 5 | pubspec.lock 文件可以确保你和他人协作是安装相同的版本包，如果你想升级包则可以运行 flutter packages upgrade 命令，它会安装 pubspec.yaml 指定约束的最高可用版本。pubspec.yaml 的约束规则也和 package.json 文件非常相同： 6 | 7 | - '^0.0.1' 它的变化类似更新y位 8 | - '>=0.1.2 <0.2.0' 可以指定一个区间 9 | 10 | pubspec.yaml 不仅可以从市场的仓库安装也可以本地或者git，这一点上和 npm 提供的功能类似，甚至比它更方便： 11 | 12 | ```bash 13 | // 本地安装，假设包的路径为 ~/icepy 14 | 15 | dependencies: 16 | icepy: 17 | path: ~/icepy 18 | ``` 19 | 20 | ```bash 21 | // 从 git 处安装，假设 git 地址为 git://github.com/icepy/plugin1.git 22 | 23 | dependencies: 24 | icepy: 25 | git: 26 | url: git://github.com/icepy/plugin1.git 27 | ``` 28 | 29 | ```bash 30 | // 如果你的包不在 git 仓库的根目录，你也可以指定它的 path 31 | 32 | dependencies: 33 | icepy: 34 | git: 35 | url: git://github.com/icepy/plugin1.git 36 | path: packages/url 37 | ``` 38 | 39 | 多数情况下也许我们需要开发一个自己的包，因为从代码的设计角度上来说，这种分离非常有意义，让我们来看一看如何发布一个包，一个最小的包结构如图： 40 | 41 | ```bash 42 | root directory 43 | - lib 44 | - main.dart 45 | - pubspec.yaml 46 | ``` 47 | 48 | 你需要一个 pubspec.yaml 和 一个 lib 目录 49 | 50 | 在 pubspec.yaml 文件中我们可以写一下包名，描述等等之类的： 51 | 52 | ```yaml 53 | name: icepyfetch # 包名 54 | description: my fetch # 包的描述 55 | version: 0.0.1 # 包的版本 56 | author: icepy # 包的作者 57 | homepage: https://github.com/icepy # 包的网页地址 58 | 59 | environment: # 指定环境 60 | sdk: ">=2.0.0-dev.68.0 <3.0.0" 61 | 62 | dependencies: # 指定包的依赖 63 | flutter: 64 | sdk: flutter 65 | 66 | flutter: 67 | plugin: 68 | androidPackage: com.example.icepy.fetch # 指定 andorind 的包名 69 | pluginClass: IcepyFetchPlugin # 指定 plugin的类名 70 | ``` 71 | 72 | 理想情况下一个包应该还要有它的测试用例，我们应该遵循官方给出的设计目录结构。 73 | 74 | ```bash 75 | root directory 76 | - example 77 | - lib 78 | - src 79 | - ... 80 | - shelf.dart 81 | - shelf_io.dart 82 | - test 83 | - a variety of tests 84 | - tool 85 | travis.sh 86 | ``` 87 | 88 | 当我们的包有多个文件时，你应该在 main.dart 中指定 library 然后导出这些文件，比如： 89 | 90 | ```dart 91 | library icepy; 92 | 93 | export 'src/utils.dart' 94 | ``` 95 | 96 | 如果你的包是应用在 Flutter 中，那么可以运行 flutter packages pub publish 来发布。 -------------------------------------------------------------------------------- /doc/upday/redux.md: -------------------------------------------------------------------------------- 1 | ## 在 Flutter 中使用 Redux 来共享状态和管理单一数据 2 | 3 | React 生态里广为人知的 Redux 状态管理，其实在 Flutter 中也能适用，它能很好的处理单一数据和状态共享，在一定程度上对于分割项目之间复杂的业务有一定的积极作用，可阅读可维护也能做的很不错。对于使用过 React 的前端开发来说 Redux 的概念肯定熟记于心了，不过我还是要简单说一些东西，只有这样我们才能更好的进入下一个环节。 4 | 5 | Redux 主要由三个部分组成：Store，Action，Reducer 6 | 7 | - Action 用于定义数据变化的行为（至少在语义上我们应该定义明确的行为） 8 | - Reducer 用于根据 Action 来产生新的状态 9 | - Store 用于存储和管理 state 10 | 11 | 这个项目的 Redux 例子使用了如下两个 package： 12 | 13 | - [https://github.com/brianegan/flutter_redux](https://github.com/brianegan/flutter_redux) 14 | - [https://github.com/brianegan/flutter_redux_dev_tools](https://github.com/brianegan/flutter_redux_dev_tools) 15 | 16 | 让我们先来看一看具体的效果图： 17 | 18 | ![](../images/flutter-55.gif) 19 | 20 | 根据效果来分析我们的 Store 至少是一个数组，数组里面是一个对象，这个对象至少有两个属性分别是 name 和 icon，那么我们应该先来定义全局的 state 和 这个对象。 21 | 22 | ```dart 23 | 24 | // 全局 state 25 | 26 | class AppState { 27 | List data; 28 | AppState(this.data); 29 | } 30 | 31 | ``` 32 | 33 | ```dart 34 | import 'package:flutter/material.dart'; 35 | 36 | // 具体使用的对象 37 | class AVList { 38 | final String name; 39 | final IconData icon; 40 | 41 | AVList(this.name, this.icon); 42 | 43 | AVList.fromJSON(Map json) 44 | :name = json['name'], 45 | icon = json['icon']; 46 | } 47 | ``` 48 | 49 | 你能看见它们分别做了两件事情，往ListView中添加一个Item，将最后一个Item从ListView中删除，那么接下来我们要定义它们的Action和Reducer。 50 | 51 | ```dart 52 | // Action 53 | import 'package:my_flutter_app/flow/listModel.dart'; 54 | 55 | List addItem(List avLists, action){ 56 | avLists.add(action.avLists[0]); 57 | return avLists; 58 | } 59 | 60 | List removeItem(List avLists, action){ 61 | avLists.removeLast(); 62 | return avLists; 63 | } 64 | ``` 65 | 66 | ```dart 67 | import 'package:redux/redux.dart'; 68 | import 'package:my_flutter_app/flow/listModel.dart'; 69 | import 'package:my_flutter_app/flow/listActions.dart'; 70 | 71 | 72 | final ListReducer = combineReducers>([ 73 | TypedReducer, AddAVListAction>(addItem), 74 | TypedReducer, RemoveAVListAction>(removeItem) 75 | ]); 76 | 77 | class AddAVListAction { 78 | final List avLists; 79 | AddAVListAction(this.avLists); 80 | } 81 | 82 | class RemoveAVListAction {} 83 | ``` 84 | 85 | 我们可以使用 combineReducers 来注册你的 Action，并且使用 TypedReducer 来映射你的 Action。 86 | 87 | 现在，我们可以在 main.dart 中定义你全局的 Store 和 Reducer ： 88 | 89 | ```dart 90 | 91 | AppState appReducer(AppState state, action) { 92 | return new AppState( 93 | ListReducer(state.data, action) 94 | ); 95 | } 96 | 97 | final store = new Store( 98 | appReducer, 99 | initialState: new AppState([new AVList("android", Icons.android)]) 100 | ); 101 | ``` 102 | 103 | 之前我们定义的数据结构中是一个List，其中对象的类型是AVList，因为我们可以在初始化的时候给它一个默认值。 104 | 105 | 接下来我们可以来完善 Widget 这一层，在这一层中基本上我们需要做： 106 | 107 | - Widget 绑定 Store 中的 state 108 | - Widget 触发某个 Action 109 | - Reducer 根据某个 Action 触发更新 state 110 | - 更新 Store 中 state 绑定的 Widget 111 | 112 | 在这里我们会使用到几个 Widget 和一个 Dispatch 来完成上述的步骤，第一步我们要使用 StoreProvider 它会将绑定的 Store 传递给它的所有子 Widget ，其次我们需要使用 StoreConnector 它会将更新后的数据 callback 给你，最后我们会使用 dispatch 来执行某些 Action ，完成某些 state 的操作。 113 | 114 | 完整的例子： 115 | 116 | ```dart 117 | import 'package:flutter/material.dart'; 118 | import 'package:redux/redux.dart'; 119 | import 'package:flutter_redux/flutter_redux.dart'; 120 | import 'package:my_flutter_app/flow/listModel.dart'; 121 | import 'package:my_flutter_app/flow/listReducer.dart'; 122 | 123 | class AppState { 124 | List data; 125 | AppState(this.data); 126 | } 127 | 128 | AppState appReducer(AppState state, action) { 129 | return new AppState( 130 | ListReducer(state.data, action) 131 | ); 132 | } 133 | 134 | class AVReduxList extends StatelessWidget { 135 | 136 | final Store store; 137 | 138 | AVReduxList({ 139 | Key key, 140 | this.store 141 | }): super(key:key); 142 | 143 | @override 144 | Widget build(BuildContext context) { 145 | return new StoreProvider( 146 | store: store, 147 | child: new MaterialApp( 148 | home: new Scaffold( 149 | appBar: new AppBar( 150 | title: new Text('AVReduxList'), 151 | ), 152 | body: new Column( 153 | children: [ 154 | new StoreConnector>( 155 | converter: (store) => store.state.data, 156 | builder: (BuildContext context, data){ 157 | return new Container( 158 | height: 500.0, 159 | child: ListView.builder( 160 | itemCount: data.length, 161 | itemBuilder: (BuildContext context, int position){ 162 | return new Padding( 163 | padding: EdgeInsets.all(10.0), 164 | child: new Row( 165 | children: [ 166 | new Text(data[position].name), 167 | new Icon(data[position].icon, color: Colors.blue) 168 | ], 169 | ), 170 | ); 171 | }, 172 | ), 173 | ); 174 | }, 175 | ), 176 | new Row( 177 | crossAxisAlignment: CrossAxisAlignment.center, 178 | children: [ 179 | new RaisedButton( 180 | color: Colors.blue, 181 | child: new Text( 182 | '更新', 183 | style: new TextStyle( 184 | color: Colors.white 185 | ), 186 | ), 187 | onPressed: (){ 188 | store.dispatch(new AddAVListAction( 189 | [new AVList("android", Icons.android)] 190 | )); 191 | }, 192 | ), 193 | new RaisedButton( 194 | color: Colors.blue, 195 | child: new Text( 196 | '删除最后一项', 197 | style: new TextStyle( 198 | color: Colors.white 199 | ), 200 | ), 201 | onPressed: (){ 202 | store.dispatch( 203 | new RemoveAVListAction() 204 | ); 205 | }, 206 | ) 207 | ], 208 | ) 209 | ], 210 | ), 211 | ), 212 | ) 213 | ); 214 | } 215 | } 216 | ``` 217 | 218 | ## Redux Dev Tools 219 | 220 | 这是一个类似 Redux Time Travel 的 UI 小工具，在开发阶段我们可以使用这个工具来追溯你的操作，因此我们需要重新定义一个入口文件 main_dev.dart： 221 | 222 | ```dart 223 | import 'package:flutter/material.dart'; 224 | import 'package:flutter_redux_dev_tools/flutter_redux_dev_tools.dart'; 225 | import 'package:redux_dev_tools/redux_dev_tools.dart'; 226 | import 'package:my_flutter_app/AVReduxList.dart'; 227 | import 'package:my_flutter_app/flow/listModel.dart'; 228 | 229 | 230 | void main(){ 231 | final store = new DevToolsStore( 232 | appReducer, 233 | initialState: new AppState([new AVList("android", Icons.android)]) 234 | ); 235 | runApp(new ReduxDevToolsContainer( 236 | store: store, 237 | child: new AVReduxList( 238 | store: store, 239 | devDrawerBuilder: (BuildContext context){ 240 | return new Drawer( 241 | child: new Padding( 242 | padding: new EdgeInsets.only(top: 24.0), 243 | child: new ReduxDevTools(store), 244 | ), 245 | ); 246 | }, 247 | ), 248 | )); 249 | } 250 | ``` 251 | 252 | 在这里我们需要使用 DevToolsStore 来定义你的全局 Store ，另外我们还需要对原来的 AVReduxList进行一些改造，增加一个 devDrawerBuilder 属性来控制 DevTools 的绘制。 253 | 254 | ```dart 255 | // AVReduxList.dart 256 | 257 | class AVReduxList extends StatelessWidget { 258 | 259 | final Store store; 260 | final WidgetBuilder devDrawerBuilder; 261 | 262 | AVReduxList({ 263 | Key key, 264 | this.store, 265 | this.devDrawerBuilder 266 | }): super(key:key); 267 | 268 | @override 269 | Widget build(BuildContext context) { 270 | return new StoreProvider( 271 | store: store, 272 | child: new MaterialApp( 273 | home: new Scaffold( 274 | endDrawer: devDrawerBuilder != null ? devDrawerBuilder(context) : null, 275 | ... 276 | ) 277 | ) 278 | ) 279 | } 280 | } 281 | 282 | ``` 283 | 284 | 最后，我们在 VSCode 中重新添加一个新的启动项： 285 | 286 | ```javascript 287 | { 288 | "name": "Flutter_Redux_DevTools", 289 | "type": "dart", 290 | "request": "launch", 291 | "program": "lib/main_dev.dart" 292 | }, 293 | ``` 294 | 295 | 效果图： 296 | 297 | ![](../images/flutter-56.gif) -------------------------------------------------------------------------------- /doc/upday/storage.md: -------------------------------------------------------------------------------- 1 | ## 关于 Flutter 本地存储的一些事 2 | 3 | 对于本地存储而言，可能前端的同学就要失望了，本身 Flutter 并未提供像 `localStorage` 这样的 API 来处理数据的本地存储，你需要依赖 iOS 或 Android 本身平台给你提供的本地存储方案，实现一个插件提供给 Flutter 应用来使用。 4 | 5 | 比如 [https://flutter.io/docs/get-started/flutter-for/ios-devs#databases-and-local-storage](https://flutter.io/docs/get-started/flutter-for/ios-devs#databases-and-local-storage) 这一小节中给大家详细说明了一些状况。如果在 iOS 中你想使用 UserDefaults 来存储一些数据（这是一个键值对的集合），那么你就要使用 [https://pub.dartlang.org/packages/shared_preferences](https://pub.dartlang.org/packages/shared_preferences) 这个插件，它封装了 iOS 中的 UserDefaults 和 Android 的 SharedPreferences。 6 | 7 | 让我们来看一看 shared_preferences 是如何使用的： 8 | 9 | ```dart 10 | import 'package:flutter/material.dart'; 11 | import 'package:shared_preferences/shared_preferences.dart'; 12 | 13 | void main() { 14 | runApp(MaterialApp( 15 | home: Scaffold( 16 | body: Center( 17 | child: RaisedButton( 18 | onPressed: _incrementCounter, 19 | child: Text('Increment Counter'), 20 | ), 21 | ), 22 | ), 23 | )); 24 | } 25 | 26 | _incrementCounter() async { 27 | SharedPreferences prefs = await SharedPreferences.getInstance(); 28 | int counter = (prefs.getInt('counter') ?? 0) + 1; 29 | print('Pressed $counter times.'); 30 | await prefs.setInt('counter', counter); 31 | } 32 | ``` 33 | 34 | 例子可以让我们看到通过 SharedPreferences.getInstance() 来获取存取器，然后调用 setInt 方法来存储键为 counter 的值。 35 | 36 | 另外对于 iOS 开发者来说如果你想使用 CoreData 来存储结构化的数据，Flutter 给大家推荐的是使用 SQFlite [https://pub.dartlang.org/packages/sqflite](https://pub.dartlang.org/packages/sqflite) ，这也是一个已经封装完成支持 iOS 和 Android 平台的插件，因此 Android 的同学需要存储结构化的数据时应该也要考虑它。 37 | 38 | ```dart 39 | import 'package:sqflite/sqflite.dart'; 40 | ``` 41 | 42 | 让我们来看一个例子： 43 | 44 | ```dart 45 | var databasesPath = await getDatabasesPath(); 46 | String path = join(databasesPath, 'demo.db'); 47 | 48 | // Delete the database 49 | await deleteDatabase(path); 50 | 51 | // open the database 52 | Database database = await openDatabase(path, version: 1, 53 | onCreate: (Database db, int version) async { 54 | // When creating the db, create the table 55 | await db.execute( 56 | 'CREATE TABLE Test (id INTEGER PRIMARY KEY, name TEXT, value INTEGER, num REAL)'); 57 | }); 58 | 59 | // Insert some records in a transaction 60 | await database.transaction((txn) async { 61 | int id1 = await txn.rawInsert( 62 | 'INSERT INTO Test(name, value, num) VALUES("some name", 1234, 456.789)'); 63 | print('inserted1: $id1'); 64 | int id2 = await txn.rawInsert( 65 | 'INSERT INTO Test(name, value, num) VALUES(?, ?, ?)', 66 | ['another name', 12345678, 3.1416]); 67 | print('inserted2: $id2'); 68 | }); 69 | 70 | // Update some record 71 | int count = await database.rawUpdate( 72 | 'UPDATE Test SET name = ?, VALUE = ? WHERE name = ?', 73 | ['updated name', '9876', 'some name']); 74 | print('updated: $count'); 75 | 76 | // Get the records 77 | List list = await database.rawQuery('SELECT * FROM Test'); 78 | List expectedList = [ 79 | {'name': 'updated name', 'id': 1, 'value': 9876, 'num': 456.789}, 80 | {'name': 'another name', 'id': 2, 'value': 12345678, 'num': 3.1416} 81 | ]; 82 | print(list); 83 | print(expectedList); 84 | assert(const DeepCollectionEquality().equals(list, expectedList)); 85 | 86 | // Count the records 87 | count = Sqflite 88 | .firstIntValue(await database.rawQuery('SELECT COUNT(*) FROM Test')); 89 | assert(count == 2); 90 | 91 | // Delete a record 92 | count = await database 93 | .rawDelete('DELETE FROM Test WHERE name = ?', ['another name']); 94 | assert(count == 1); 95 | 96 | // Close the database 97 | await database.close(); 98 | ``` 99 | 100 | 其实这就是在写 SQL 语句。 -------------------------------------------------------------------------------- /doc/upday/stream.md: -------------------------------------------------------------------------------- 1 | ## 使用 Stream 来处理异步和简单更新 UI 2 | 3 | 很多其他的编程语言都有 Stream 的概念，dart 也未能免俗。如果你了解 Rx 系列，Stream 能让你在更新 UI 是避免使用 setState 方法，这也是处理异步除 Future 之外另一种很有趣的方式。在 Stream 的世界里你可以将它理解为一个管道，在管道的一边你会监听它，在管道的另一边你会往这个管道里去添加数据，管道监听的一边能收到你往这个管道里添加的数据，这种方式你也可以从观察者模式上去假设记忆般的理解，先让我们来看一个更新 UI 的例子，然后再让我们从头学习它。 4 | 5 | ![](../images/flutter-67.gif) 6 | 7 | 对于 Stream 而言它有两种方式： 8 | 9 | - 单订阅 10 | - 广播 Stream 11 | 12 | 对于单订阅来说它只允许你实现一个监听的出口，你的第一个出口订阅一旦被取消，你将无法再次订阅。 13 | 14 | ```dart 15 | StreamController cr = new StreamController(); 16 | cr.stream.listen((data){ 17 | debugPrint('${data}'); 18 | }); 19 | 20 | cr.sink.add(1); 21 | cr.sink.add(2); 22 | cr.sink.add(3); 23 | 24 | cr.close(); 25 | ``` 26 | 27 | 从这个简单的例子来看，StreamController 使用 stream 来监听，使用 sink 来往这个管道里添加你提交的数据。 28 | 29 | 那么广播Stream又是什么？ 30 | 31 | 广播 Stream 允许我们可以给 Stream 添加任意数量的订阅，一旦 Stream 开始工作，你添加的订阅都能接收到数据，一般情况下我们可以配合着 StreamTransformer 来使用，将 Stream 在通道里流转起来。 32 | 33 | ```dart 34 | StreamController cr2 = new StreamController(); 35 | final st = StreamTransformer.fromHandlers( 36 | handleData: (int data, sink){ 37 | if (data == 10) { 38 | sink.add('添加正常'); 39 | } else { 40 | sink.addError('添加错误'); 41 | } 42 | } 43 | ); 44 | 45 | cr2.stream.transform(st).listen((String data){ 46 | debugPrint(data); 47 | }).onError((e){ 48 | debugPrint('${e}'); 49 | }); 50 | 51 | cr2.sink.add(11); 52 | cr2.sink.add(10); 53 | 54 | cr2.close(); 55 | ``` 56 | 57 | 当然 Stream 也提供了很多便捷的构造方法供我们使用，我们并不需要如上那么麻烦的处理： 58 | 59 | ```dart 60 | StreamController cr3 = new StreamController(); 61 | cr3.stream.where((value){ 62 | return value == 10; 63 | }).listen((data){ 64 | 65 | }); 66 | 67 | cr3.sink.add(11); 68 | cr3.sink.add(10); 69 | cr3.close(); 70 | ``` 71 | 72 | Stream 也是天然可以处理异步的，如果你不想使用 Future 那么利用 Stream 也能很好的处理异步。 73 | 74 | ### StreamBuilder 75 | 76 | 既然 Stream 这么好用那么在 Flutter 里我们要更新 UI 该如何处理？Flutter 提供了一个叫 StreamBuilder 的 Widget ，这个 Widget 就是专门将 Stream 和 Widget 关联起来，我们可以使用它很方便的来更新 UI，唯一需要注意的地方是，我们要在 dispose 中 close Stream。 77 | 78 | ```dart 79 | StreamBuilder({ 80 | Key key, 81 | this.initialData, 82 | Stream stream, 83 | @required this.builder 84 | }) 85 | ``` 86 | 87 | StreamBuilder 的参数并不多，很容易让我们学习它，我们需要为它指定一个 stream 然后在 builder 中绘制 UI即可。 88 | 89 | 90 | ```dart 91 | import 'package:flutter/material.dart'; 92 | import 'dart:async'; 93 | 94 | class AVStream extends StatefulWidget{ 95 | @override 96 | AVStreamState createState() => new AVStreamState(); 97 | } 98 | 99 | class AVStreamState extends State { 100 | 101 | String str = 'hello'; 102 | StreamController streamC = new StreamController(); 103 | 104 | @override 105 | void dispose(){ 106 | streamC.close(); 107 | super.dispose(); 108 | } 109 | 110 | @override 111 | Widget build(BuildContext context){ 112 | 113 | return new MaterialApp( 114 | home: new Scaffold( 115 | appBar: new AppBar( 116 | title: new Text('AVStream'), 117 | ), 118 | body: new Center( 119 | child: new Column( 120 | children: [ 121 | StreamBuilder( 122 | stream: streamC.stream, 123 | initialData: str, 124 | builder: (BuildContext context, AsyncSnapshot snapshot){ 125 | return new Text(snapshot.data); 126 | }, 127 | ), 128 | new RaisedButton( 129 | child: new Text( 130 | '更新', 131 | style: new TextStyle( 132 | color: Colors.white 133 | ), 134 | ), 135 | color: Colors.blue, 136 | onPressed: (){ 137 | streamC.sink.add('icepy'); 138 | }, 139 | ) 140 | ], 141 | ), 142 | ), 143 | ), 144 | ); 145 | } 146 | } 147 | ``` -------------------------------------------------------------------------------- /doc/widget/column.md: -------------------------------------------------------------------------------- 1 | ## Column 2 | 3 | > A widget that displays its children in a vertical array. 4 | 5 | Column 可以将 children Widget 向垂直的方向进行填充，它的布局行为继承于 Flex ，因此我们完全可以按照 Web 中的 Flex来参考，包括它的概念。 6 | 7 | 通过构造函数我们可以看到它的默认值： 8 | 9 | ```dart 10 | Column({ 11 | Key key, 12 | MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, 13 | MainAxisSize mainAxisSize = MainAxisSize.max, 14 | CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, 15 | TextDirection textDirection, 16 | VerticalDirection verticalDirection = VerticalDirection.down, 17 | TextBaseline textBaseline, 18 | List children = const [], 19 | }) 20 | ``` 21 | 22 | ### crossAxisAlignment 23 | 24 | 它的作用可以让 children Widget 在交叉方向进行排列，它一共有五个属性，这里我只举例两个常用的属性，其他属性可参考 [https://docs.flutter.io/flutter/rendering/CrossAxisAlignment-class.html](https://docs.flutter.io/flutter/rendering/CrossAxisAlignment-class.html)。 25 | 26 | **CrossAxisAlignment.end** 27 | 28 | ![](../images/flutter-33.png) 29 | 30 | 31 | **CrossAxisAlignment.start** 32 | 33 | ![](../images/flutter-34.png) 34 | 35 | ### mainAxisAlignment 36 | 37 | 它的作用可以让 children Widget 在主轴方向进行排列，它一共有六个属性，这里我只举例四个常用的属性，其他属性可参考 [https://docs.flutter.io/flutter/rendering/MainAxisAlignment-class.html](https://docs.flutter.io/flutter/rendering/MainAxisAlignment-class.html)。 38 | 39 | **MainAxisAlignment.end** 40 | 41 | ![](../images/flutter-35.png) 42 | 43 | **MainAxisAlignment.center** 44 | 45 | ![](../images/flutter-36.png) 46 | 47 | **MainAxisAlignment.spaceAround** 48 | 49 | spaceAround 可以将 children Widget 之间空白的区域进行均分。 50 | 51 | ![](../images/flutter-37.png) 52 | 53 | **MainAxisAlignment.spaceBetween** 54 | 55 | spaceBetween 可以将 children Widget 之间的空白区域均等分隔，但是首尾两个元素都靠近边界的首尾。 56 | 57 | ![](../images/flutter-38.png) 58 | 59 | 其他属性可参考 [https://docs.flutter.io/flutter/widgets/Column-class.html](https://docs.flutter.io/flutter/widgets/Column-class.html) -------------------------------------------------------------------------------- /doc/widget/container.md: -------------------------------------------------------------------------------- 1 | ## Container 2 | 3 | > A convenience widget that combines common painting, positioning, and sizing widgets. 4 | 5 | [https://docs.flutter.io/flutter/widgets/Container-class.html](https://docs.flutter.io/flutter/widgets/Container-class.html) 6 | 7 | 做为一个使用频率非常高的 Widget 我们很有必要深入了解它的布局行为，如下 list 从官网翻译，很重要： 8 | 9 | - Container 会遵循如下顺序去尝试布局 10 | - 对齐方式 11 | - 调整自身的尺寸来适应子节点 12 | - 采用高宽，约束 13 | - 调整自身去适应父节点 14 | - 调整自身到尽可能的小 15 | - 如果没有子节点，没有高宽，没有约束，并且父 Widget 也没有设置 unbounded 约束，那么 Container 表现的行为会根据自身调整到尽可能的小。 16 | - 如果没有子节点，没有设置对齐方式，但提供了高，宽，或约束，那么 Container 表现的行为会根据这些约束以及父 Widget 约束的组合，将自身调整到尽可能的小。 17 | - 如果没有子节点，没有高宽，没有约束，没有对齐方式，但父 Widget 提供了 bounded constraints，那么 Container 表现的行为会根据父 Widget constraints 将自身调整到尽可能的大。 18 | - 如果设置了对齐方式并且父 Widget 提供了 unbounded constraints ，那么 Container 表现的行为会调整自己的尺寸来包住子节点。 19 | - 如果设置了对齐方式并且父 Widget 提供了bounded constraints，那么 Container 表现的行为会将自身调整为尽可能的大（在父 Widget 的范围内），然后将子节点根据对齐方式来调整。 20 | - 如果有子节点，没有高宽，没有约束，没有对齐方式，那么 Container 表现的行为会将父 Widget 的约束传递给 子节点，并且子节点会根据这个约束进行调整 21 | - margin，padding 也会影响布局 22 | 23 | 接下来让我们来看一看官网例子； 24 | 25 | ```dart 26 | new Container( 27 | margin: const EdgeInsets.all(10.0), 28 | color: const Color(0xFF00FF00), 29 | width: 48.0, 30 | height: 48.0, 31 | ), 32 | ``` 33 | 34 | ![](../images/flutter-46.png) 35 | 36 | 再让我们看一看一个组合的例子： 37 | 38 | ```dart 39 | import 'package:flutter/material.dart'; 40 | 41 | class AVContainerCenterPadding extends StatelessWidget { 42 | @override 43 | Widget build(BuildContext context) { 44 | return new Scaffold( 45 | appBar: new AppBar( 46 | title: new Text('AVContainerCenterPadding'), 47 | ), 48 | body: new Column( 49 | children: [ 50 | new Container( 51 | margin: const EdgeInsets.all(10.0), 52 | color: const Color(0xFF00FF00), 53 | width: 48.0, 54 | height: 48.0, 55 | ), 56 | new Container( 57 | margin: const EdgeInsets.all(10.0), 58 | color: Colors.black, 59 | width: 48.0, 60 | height: 48.0, 61 | ), 62 | new Container( 63 | width: 640, 64 | height: 150.0, 65 | child: new Image.network('https://icepy.me/static/media/bg.3f44b417.jpg'), 66 | ) 67 | ], 68 | ), 69 | ); 70 | } 71 | } 72 | ``` 73 | 74 | ![](../images/flutter-47.png) 75 | 76 | 那么问题是“为什么它们是居中的”？因为 Column 的 crossAxisAlignment 默认值是 CrossAxisAlignment.center。 77 | 78 | 再让我们看一看官网提供的稍微复杂的例子： 79 | 80 | ```dart 81 | import 'package:flutter/material.dart'; 82 | 83 | class AVContainerCenterPadding extends StatelessWidget { 84 | @override 85 | Widget build(BuildContext context) { 86 | return new Scaffold( 87 | appBar: new AppBar( 88 | title: new Text('AVContainerCenterPadding'), 89 | ), 90 | body: new Column( 91 | children: [ 92 | new Container( 93 | constraints: BoxConstraints.expand( 94 | height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0, 95 | ), 96 | padding: const EdgeInsets.all(8.0), 97 | color: Colors.teal.shade700, 98 | alignment: Alignment.center, 99 | child: Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)), 100 | foregroundDecoration: BoxDecoration( 101 | image: DecorationImage( 102 | image: NetworkImage('https://icepy.me/static/media/bg.3f44b417.jpg'), 103 | centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0), 104 | ), 105 | ), 106 | transform: Matrix4.rotationZ(0.1), 107 | ) 108 | ], 109 | ), 110 | ); 111 | } 112 | } 113 | ``` 114 | 115 | ![](../images/flutter-48.png) 116 | 117 | 在这个例子中不仅用了 padding 还使用了对齐方式。 118 | 119 | Container 提供的属性较多但每一个都很有用，如果有必要你可以阅读一下，从官网翻译而来： 120 | 121 | - alignment：控制child的对齐方式 122 | - padding：decoration内部的空白区域，如果有child的话，child位于padding内部。padding与margin的不同之处在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。 123 | - color：用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果。 124 | - decoration：绘制在child后面的装饰，设置了decoration的话，就不能设置color属性。 125 | - foregroundDecoration：绘制在child前面的装饰。 126 | - width：container的宽度 127 | - height：container的高度 128 | - constraints：你可以使用 BoxConstraints 添加到child上额外的约束条件 129 | - margin：围绕在decoration和child之外的空白区域。 130 | - transform：设置container的变换矩阵，类型为Matrix4。 131 | - child：container中的内容widget。 -------------------------------------------------------------------------------- /doc/widget/dialog.md: -------------------------------------------------------------------------------- 1 | ## SimpleDialog 2 | 3 | > A simple material design dialog. 4 | 5 | 这是一种非常灵活的 Dialog 完全需要你根据自己的需求，来完成它的绘制。 6 | 7 | ```dart 8 | import 'package:flutter/material.dart'; 9 | 10 | class AVDialog extends StatelessWidget { 11 | @override 12 | Widget build(BuildContext context) { 13 | return new Scaffold( 14 | appBar: new AppBar( 15 | title: new Text('AVAlertDialog'), 16 | ), 17 | body: new RaisedButton( 18 | child: new Text('click me'), 19 | color: Colors.green, 20 | onPressed: (){ 21 | showDialog( 22 | context: context, 23 | child: new SimpleDialog( 24 | title: new Text('Hello icepy'), 25 | children: [ 26 | new Text('dialog children') 27 | ], 28 | ) 29 | ); 30 | }, 31 | ), 32 | ); 33 | } 34 | } 35 | ``` 36 | 37 | ![](../images/flutter-52.gif) 38 | 39 | ## AlertDialog 40 | 41 | > A material design alert dialog. 42 | 43 | 顾名思义这是一种比 SimpleDialog 封装程度更高的 Dialog ，一般情况下如果你的用户需要完成确认这一项功能，那么使用它会比较迅速。 44 | 45 | ```dart 46 | import 'package:flutter/material.dart'; 47 | 48 | class AVDialog extends StatelessWidget { 49 | @override 50 | Widget build(BuildContext context) { 51 | return new Scaffold( 52 | appBar: new AppBar( 53 | title: new Text('AVDialog'), 54 | ), 55 | body: new RaisedButton( 56 | child: new Text('click me'), 57 | color: Colors.green, 58 | onPressed: (){ 59 | showDialog( 60 | context: context, 61 | child: new AlertDialog( 62 | title: new Text('alert'), 63 | actions: [ 64 | new FlatButton( 65 | child: new Text('确定'), 66 | onPressed: (){ 67 | Navigator.pop(context); 68 | }, 69 | ) 70 | ], 71 | ) 72 | ); 73 | }, 74 | ), 75 | ); 76 | } 77 | } 78 | ``` 79 | 80 | ![](../images/flutter-53.gif) 81 | 82 | ## AboutDialog 83 | 84 | > An about box. This is a dialog box with the application's icon, name, version number, and copyright, plus a button to show licenses for software used by the application. 85 | 86 | 这个 Widget 一般来说不是很常用，只用于显示应用，如图： 87 | 88 | ![](../images/flutter-54.gif) 89 | 90 | ```dart 91 | import 'package:flutter/material.dart'; 92 | 93 | class AVDialog extends StatelessWidget { 94 | @override 95 | Widget build(BuildContext context) { 96 | return new Scaffold( 97 | appBar: new AppBar( 98 | title: new Text('AVDialog'), 99 | ), 100 | body: new RaisedButton( 101 | child: new Text('click me'), 102 | color: Colors.green, 103 | onPressed: (){ 104 | showDialog( 105 | context: context, 106 | child: new AboutDialog( 107 | applicationName: 'Flutter', 108 | applicationVersion: 'v1.0.0', 109 | applicationIcon: new Icon( 110 | Icons.android, 111 | color: Colors.green, 112 | ), 113 | children: [ 114 | new Text( 115 | '更新摘要 \n Update 1.0.0' 116 | ) 117 | ], 118 | ) 119 | ); 120 | }, 121 | ), 122 | ); 123 | } 124 | } 125 | ``` -------------------------------------------------------------------------------- /doc/widget/gridview.md: -------------------------------------------------------------------------------- 1 | ## GridView 2 | 3 | > A scrollable, 2D array of widgets. 4 | 5 | GridView 作为一个很常见的可滚动的多列列表，它的实际使用场景还是很多的。它的布局行为完全继承于 ScrollView，会尽量的占满整个空间，先让我们来看一个小例子： 6 | 7 | ![](../images/flutter-64.gif) 8 | 9 | ```dart 10 | import 'package:flutter/material.dart'; 11 | 12 | class AVGridView extends StatelessWidget { 13 | @override 14 | Widget build(BuildContext context){ 15 | return new MaterialApp( 16 | home: new Scaffold( 17 | appBar: new AppBar( 18 | title: new Text('AVGridView'), 19 | ), 20 | body: new GridView.count( 21 | crossAxisCount: 2, 22 | children: List.generate(100, (index){ 23 | return new Center( 24 | child: new Text( 25 | 'Item ${index}', 26 | style: Theme.of(context).textTheme.headline, 27 | ), 28 | ); 29 | }) 30 | ), 31 | ), 32 | ); 33 | } 34 | } 35 | ``` 36 | 37 | 在这个例子中创建了一个2列100个元素的列表，一般情况下我们会使用到它提供的四种方便的构造方法： 38 | 39 | ```bash 40 | GridView.builder 41 | GridView.custom 42 | GridView.count 43 | GridView.extent 44 | ``` 45 | 46 | 接下来，我们看一看它的构造方法： 47 | 48 | ```dart 49 | GridView({ 50 | Key key, 51 | Axis scrollDirection = Axis.vertical, 52 | bool reverse = false, 53 | ScrollController controller, 54 | bool primary, 55 | ScrollPhysics physics, 56 | bool shrinkWrap = false, 57 | EdgeInsetsGeometry padding, 58 | @required this.gridDelegate, 59 | bool addAutomaticKeepAlives = true, 60 | bool addRepaintBoundaries = true, 61 | bool addSemanticIndexes = true, 62 | double cacheExtent, 63 | List children = const [], 64 | int semanticChildCount, 65 | }) 66 | ``` 67 | 68 | 参数不是很多，这些属性都有它特定的意义，我们常用的如下： 69 | 70 | - scrollDirection 设置滚动的方向 71 | - controller 用于控制 child 滚动时的位置 72 | - reverse 控制是否反向滚动 73 | - physics 滚动视图如何响应用户的输入 74 | - gridDelegate 控制GridView子 Widget 布局的 delegate 75 | 76 | -------------------------------------------------------------------------------- /doc/widget/listview.md: -------------------------------------------------------------------------------- 1 | ## ListView 2 | 3 | > A scrollable list of widgets arranged linearly. 4 | 5 | ListView 作为最常用的 Widget 并且根据你的父 Widget 的高宽自动处理滚动区域，不管是竖轴还是横轴，如果是横轴则需要填满 ListView。另外，这个 Widget 非常像 iOS 中的 UITableView ，需要说明的是如果你有大列表需要渲染，你应该优先使用 ListView 而不是自己开发。 6 | 7 | 先让我们来看一个列子，如图： 8 | 9 | ![](../images/flutter-57.png) 10 | 11 | ```dart 12 | import 'package:flutter/material.dart'; 13 | 14 | class AVListView extends StatelessWidget { 15 | 16 | final List data = ['hello', 'icepy']; 17 | 18 | List _renderListViewItems(){ 19 | return data.map((v){ 20 | return new Text(v); 21 | }).toList(); 22 | } 23 | 24 | @override 25 | Widget build(BuildContext context) { 26 | return new MaterialApp( 27 | home: new Scaffold( 28 | appBar: new AppBar( 29 | title: new Text('AVListView'), 30 | ), 31 | body: new ListView( 32 | children: _renderListViewItems(), 33 | ), 34 | ), 35 | ); 36 | } 37 | } 38 | ``` 39 | 40 | 当你使用 ListView 构造函数时它的子Item是根据你的数据多少来创建的，假如一次你给的数据超过10万条，那么此时 ListView 会一次性渲染出来10万条数据界面，这对于性能来说肯定不可接受，因此我们需要对上面的实现方式做一些更改。 41 | 42 | ![](../images/flutter-58.png) 43 | 44 | ```dart 45 | import 'package:flutter/material.dart'; 46 | 47 | class AVListView extends StatelessWidget { 48 | 49 | final List data = [ 50 | 'hello', 51 | 'icepy', 52 | 'back', 53 | 'home', 54 | 'tomorrow?' 55 | ]; 56 | 57 | Widget _renderListViewItem(String val){ 58 | return new Text(val); 59 | } 60 | 61 | @override 62 | Widget build(BuildContext context) { 63 | return new MaterialApp( 64 | home: new Scaffold( 65 | appBar: new AppBar( 66 | title: new Text('AVListView'), 67 | ), 68 | body: ListView.builder( 69 | itemCount: data.length, 70 | itemBuilder: (BuildContext context, int index){ 71 | return _renderListViewItem(data[index]); 72 | }, 73 | ) 74 | ), 75 | ); 76 | } 77 | } 78 | ``` 79 | 80 | 另外你还可以使用 ListView.separated 和 ListView.custom ，其中 ListView.separated 的使用和 ListView.builder 很类似，唯一的区别在于 separated 可以绘制每一个 Item 的分隔符。 81 | 82 | ![](../images/flutter-59.png) 83 | 84 | ```dart 85 | import 'package:flutter/material.dart'; 86 | 87 | class AVListView extends StatelessWidget { 88 | 89 | final List data = [ 90 | 'hello', 91 | 'icepy', 92 | 'back', 93 | 'home', 94 | 'tomorrow?' 95 | ]; 96 | 97 | Widget _renderListViewItem(String val){ 98 | return new Text(val); 99 | } 100 | 101 | @override 102 | Widget build(BuildContext context) { 103 | return new MaterialApp( 104 | home: new Scaffold( 105 | appBar: new AppBar( 106 | title: new Text('AVListView'), 107 | ), 108 | body: ListView.separated( 109 | itemCount: data.length, 110 | itemBuilder: (BuildContext context, int index){ 111 | return _renderListViewItem(data[index]); 112 | }, 113 | separatorBuilder: (BuildContext context, int index){ 114 | return new Container( 115 | height: 1.0, 116 | color: Colors.blue, 117 | ); 118 | }, 119 | ) 120 | ) 121 | ); 122 | } 123 | } 124 | ``` 125 | 126 | 至于 ListView.custom 顾名思义我们可以自定义，只不过需要传入一个实现了 SliverChildDelegate 的 Widget。 127 | 128 | ### SelectRowAt 129 | 130 | 虽然我们渲染了 ListView 但是多少情况下我们都需要完成一些操作，这些手势的事件在 ListView 里并没有一个很方便的方式，比如 iOS 的： 131 | 132 | ```Swift 133 | func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { 134 | 135 | } 136 | ``` 137 | 138 | 那么，我们只能使用另外的方式来处理这个问题了： 139 | 140 | ```dart 141 | import 'package:flutter/material.dart'; 142 | 143 | class AVListView extends StatelessWidget { 144 | 145 | final List data = [ 146 | 'hello', 147 | 'icepy', 148 | 'back', 149 | 'home', 150 | 'tomorrow?' 151 | ]; 152 | 153 | Widget _renderListViewItem(String val, int index, BuildContext context){ 154 | return new RaisedButton( 155 | child: new Text(val), 156 | onPressed: (){ 157 | debugPrint(val); 158 | }, 159 | ); 160 | } 161 | 162 | @override 163 | Widget build(BuildContext context) { 164 | return new MaterialApp( 165 | home: new Scaffold( 166 | appBar: new AppBar( 167 | title: new Text('AVListView'), 168 | ), 169 | body: ListView.separated( 170 | itemCount: data.length, 171 | itemBuilder: (BuildContext itemContext, int index){ 172 | return _renderListViewItem(data[index], index, context); 173 | }, 174 | separatorBuilder: (BuildContext itemContext, int index){ 175 | return new Container( 176 | height: 1.0, 177 | color: Colors.blue, 178 | ); 179 | }, 180 | ) 181 | ) 182 | ); 183 | } 184 | } 185 | ``` 186 | 187 | ![](../images/flutter-60.gif) -------------------------------------------------------------------------------- /doc/widget/paddingaligncenter.md: -------------------------------------------------------------------------------- 1 | ## Padding 2 | 3 | > A widget that insets its child by the given padding. 4 | 5 | Padding 作为一个基础 Widget 被使用的频率还是蛮高的，它的功能非常的单一，就是给子节点设置 padding 属性，你可以把它理解为前端的 css padding 属性。 6 | 7 | ```dart 8 | 9 | import 'package:flutter/material.dart'; 10 | 11 | class AVPaddingAlignCenter extends StatelessWidget { 12 | @override 13 | Widget build(BuildContext context) { 14 | return new Scaffold( 15 | appBar: new AppBar( 16 | title: new Text('AVPaddingAlignCenter'), 17 | ), 18 | body: new Container( 19 | color: Colors.blue, 20 | width: 100.0, 21 | height: 100.0, 22 | child: new Padding( 23 | padding: EdgeInsets.all(8.0), 24 | child: new Card( 25 | child: new Text('icepy'), 26 | ), 27 | ), 28 | ) 29 | ); 30 | } 31 | } 32 | 33 | ``` 34 | 35 | 如图： 36 | 37 | ![](../images/flutter-49.png) 38 | 39 | 官网给出了一个小小的问题 **Why use a Padding widget rather than a Container with a Container.padding property?** ，翻译和整理如下： 40 | 41 | Padding 和 Container padding 属性两者之间没有任何区别，如果你使用 Container padding 属性那么 Container 会为你构建一个 Padding，如果你只是想实现一个 padding 那么你应该使用 Padding 而不是 Container。Container 内部是将很多其他的 Widget 组合到了一起，如果考虑到性能和使用场景，你应该使用正确的 Widget 来实现 Padding。 42 | 43 | ## Align 44 | 45 | > A widget that aligns its child within itself and optionally sizes itself based on the child's size. 46 | 47 | Align 也是一个功能非常单一的 Widget 它只做一件事情，那就是设置 child 的对齐方式。 48 | 49 | 假设我们设置一个父 Widget 200.0 的容器，让我们来看一看它的效果： 50 | 51 | ![](../images/flutter-50.png) 52 | 53 | ```dart 54 | import 'package:flutter/material.dart'; 55 | 56 | class AVPaddingAlignCenter extends StatelessWidget { 57 | @override 58 | Widget build(BuildContext context) { 59 | return new Scaffold( 60 | appBar: new AppBar( 61 | title: new Text('AVPaddingAlignCenter'), 62 | ), 63 | body: new Container( 64 | width: 200, 65 | height: 50, 66 | color: Colors.green, 67 | child: new Align( 68 | alignment: Alignment.center, 69 | child: new Text('icepy'), 70 | ), 71 | ) 72 | ); 73 | } 74 | } 75 | ``` 76 | 77 | 如果当你设置了widthFactor或heightFactor时，Align会根据factor属性来调整自身，比如当 widthFactor 是3的时候，Align 会将自身的width 调整为 child 的3倍。 78 | 79 | ![](../images/flutter-51.png) 80 | 81 | ```dart 82 | import 'package:flutter/material.dart'; 83 | 84 | class AVPaddingAlignCenter extends StatelessWidget { 85 | @override 86 | Widget build(BuildContext context) { 87 | return new Scaffold( 88 | appBar: new AppBar( 89 | title: new Text('AVPaddingAlignCenter'), 90 | ), 91 | body: new Container( 92 | color: Colors.green, 93 | child: new Align( 94 | widthFactor: 2.0, 95 | heightFactor: 2.0, 96 | child: new Text('icepy'), 97 | ), 98 | ) 99 | ); 100 | } 101 | } 102 | ``` 103 | 104 | ## Center 105 | 106 | > A widget that centers its child within itself. 107 | 108 | 顾名思义就是为了居中，通过源码我们可以看到： 109 | 110 | ```dart 111 | class Center extends Align { 112 | /// Creates a widget that centers its child. 113 | const Center({ Key key, double widthFactor, double heightFactor, Widget child }) 114 | : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child); 115 | } 116 | ``` 117 | 118 | 它的布局行为和 Align 一致，只不过它只处理居中。 -------------------------------------------------------------------------------- /doc/widget/row.md: -------------------------------------------------------------------------------- 1 | ## Row 2 | 3 | > A widget that displays its children in a horizontal array. 4 | 5 | Row 的布局行为继承于 Flex，因此我们完全可以按照 Web 中的 Flex 来参考，包括主轴，交叉轴等概念。 6 | 7 | 通过构造函数我们可以看到它们的默认值； 8 | 9 | ```dart 10 | Row({ 11 | Key key, 12 | MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, 13 | MainAxisSize mainAxisSize = MainAxisSize.max, 14 | CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, 15 | TextDirection textDirection, 16 | VerticalDirection verticalDirection = VerticalDirection.down, 17 | TextBaseline textBaseline, 18 | List children = const [], 19 | }) 20 | ``` 21 | 22 | ### crossAxisAlignment 23 | 24 | 它的作用可以让 children 元素在交叉轴方向上排列展示方式，它一共有五个属性，这里我只举例三种最常用的属性，其他属性可参考 [https://docs.flutter.io/flutter/rendering/CrossAxisAlignment-class.html](https://docs.flutter.io/flutter/rendering/CrossAxisAlignment-class.html)。 25 | 26 | **CrossAxisAlignment.end** 27 | 28 | ![](../images/flutter-26.png) 29 | 30 | **CrossAxisAlignment.center** 31 | 32 | ![](../images/flutter-27.png) 33 | 34 | **CrossAxisAlignment.start** 35 | 36 | ![](../images/flutter-25.png) 37 | 38 | > 它的约束执行依赖于你设置的最大高度 39 | 40 | ### mainAxisAlignment 41 | 42 | 它的作用可以让 children 元素在主轴的方向上排列展示方式，它一共有六个属性，这里我只举例四种最常用的属性，其他属性可参考 [https://docs.flutter.io/flutter/rendering/MainAxisAlignment-class.html](https://docs.flutter.io/flutter/rendering/MainAxisAlignment-class.html)。 43 | 44 | **MainAxisAlignment.center** 45 | 46 | ![](../images/flutter-28.png) 47 | 48 | **MainAxisAlignment.end** 49 | 50 | ![](../images/flutter-29.png) 51 | 52 | **MainAxisAlignment.spaceAround** 53 | 54 | spaceAround 可以将 children 之间的空白区域均等的分隔。 55 | 56 | ![](../images/flutter-30.png) 57 | 58 | **MainAxisAlignment.spaceBetween** 59 | 60 | spaceBetween 可以将 children 之间的空白区域均等分隔，但是首尾两个元素都靠近边界的首尾。 61 | 62 | ![](../images/flutter-31.png) 63 | 64 | ### mainAxisSize 65 | 66 | 这个属性可以设置主轴方向占用空间，它只有两个属性，默认值是 max ，不过我们可以看一看 min 显示效果： 67 | 68 | ![](../images/flutter-32.png) 69 | 70 | [https://docs.flutter.io/flutter/widgets/Flex/mainAxisSize.html](https://docs.flutter.io/flutter/widgets/Flex/mainAxisSize.html) 71 | 72 | ### verticalDirection 73 | 74 | 这个属性可以控制布局方式的走向，它只有两个属性，默认值是 down ，另外一个值是 up ，这两个属性顾名思义，一般UI的绘制都是从顶部往下绘制，如果你设置了 up ，那么绘制的走向就变成了从底部往上绘制。 75 | 76 | [https://docs.flutter.io/flutter/widgets/Flex/verticalDirection.html](https://docs.flutter.io/flutter/widgets/Flex/verticalDirection.html) 77 | 78 | -------------------------------------------------------------------------------- /doc/widget/scaffold.md: -------------------------------------------------------------------------------- 1 | ## Scaffold 2 | 3 | > Implements the basic material design visual layout structure. 4 | 5 | 只要是在 Material 中定义的单个界面显示的 Widget 都可以使用它，它提供了诸如：抽屉（drawers）底部按钮（bottom sheets）和 底部通知（snack bars），你可以认为它是一基本快速实现某些布局的容器 Widget。 6 | 7 | 先让我们来看一个基础的带 AppBar 的布局框架： 8 | 9 | ```dart 10 | import 'package:flutter/material.dart'; 11 | 12 | class AVScaffold extends StatelessWidget { 13 | @override 14 | Widget build(BuildContext context) { 15 | return new Scaffold( 16 | appBar: new AppBar( 17 | title: new Text('Home'), 18 | ), 19 | body: new Center( 20 | child: new Text('Scaffold'), 21 | ), 22 | ); 23 | } 24 | } 25 | ``` 26 | 27 | ![](../images/flutter-42.png) 28 | 29 | 此外 Scaffold Widget 也能设置背景颜色等。 30 | 31 | 如果你想快速的实现一个 Drawer 布局框架，我们可以使用 drawer 属性，配合着 Drawer 和 ListView 来快速实现。 32 | 33 | ```dart 34 | import 'package:flutter/material.dart'; 35 | 36 | class AVScaffold extends StatelessWidget { 37 | @override 38 | Widget build(BuildContext context) { 39 | return new Scaffold( 40 | appBar: new AppBar( 41 | title: new Text('Home'), 42 | ), 43 | body: new Center( 44 | child: new Text('Scaffold'), 45 | ), 46 | drawer: new Drawer( 47 | child: new ListView( 48 | padding: const EdgeInsets.only(), 49 | children: [ 50 | new ListTile( 51 | title: new Text('Drawer'), 52 | onTap: () => {}, 53 | ) 54 | ], 55 | ), 56 | ), 57 | ); 58 | } 59 | } 60 | ``` 61 | 62 | ![](../images/flutter-43.gif) 63 | 64 | 再让我们看一看 snack bars 的效果，实现起来也很简单，唯一需要注意的地方是如果你的 Scaffold 是被父 Widget 包裹的 Context，那么你需要引用 Scaffold 的 Context。 65 | 66 | ![](../images/flutter-44.gif) 67 | 68 | ```dart 69 | import 'package:flutter/material.dart'; 70 | 71 | class AVScaffold extends StatelessWidget { 72 | @override 73 | Widget build(BuildContext context) { 74 | return new Scaffold( 75 | appBar: new AppBar( 76 | title: new Text('Home'), 77 | ), 78 | body: new Builder( 79 | builder: (BuildContext context){ 80 | return new Center( 81 | child: new RaisedButton( 82 | child: new Text('click me'), 83 | color: Colors.blue, 84 | onPressed: () { 85 | Scaffold.of(context).showSnackBar(new SnackBar( 86 | content: new Text('SnackBar'), 87 | )); 88 | } 89 | ) 90 | ); 91 | }, 92 | ) 93 | 94 | ); 95 | } 96 | } 97 | ``` 98 | 99 | 最后让我们来看一看 bottom sheets ，这个效果其实和前端里的 position: fixed 很类似，当你有一个输入框想输入一些文本时，为了让键盘不遮挡它，你可以使用 bottomSheet 快速实现一个这样的效果，为了能让例子更生动一些，我使用了一些别的 Widget组合而成，如图： 100 | 101 | ![](../images/flutter-45.gif) 102 | 103 | ```dart 104 | import 'package:flutter/material.dart'; 105 | 106 | class AVScaffold extends StatefulWidget{ 107 | 108 | @override 109 | AVScaffoldState createState() => new AVScaffoldState(); 110 | } 111 | 112 | class AVScaffoldState extends State { 113 | 114 | List data = ['']; 115 | 116 | Widget _renderList(String val){ 117 | return new Text(val); 118 | } 119 | 120 | @override 121 | Widget build(BuildContext context) { 122 | final textCV = TextEditingController(); 123 | textCV.addListener(() { 124 | 125 | }); 126 | return new Scaffold( 127 | appBar: new AppBar( 128 | title: new Text('Home'), 129 | ), 130 | body: ListView.builder( 131 | itemCount: data.length, 132 | itemBuilder: (BuildContext context, int position){ 133 | return _renderList(data[position]); 134 | }, 135 | ), 136 | bottomSheet: new Container( 137 | child: new Row( 138 | children: [ 139 | new Expanded( 140 | child: new TextField( 141 | controller: textCV, 142 | ), 143 | ), 144 | new RaisedButton( 145 | child: new Text('发表'), 146 | onPressed: () { 147 | setState(() { 148 | data.add(textCV.text); 149 | }); 150 | }, 151 | ) 152 | ], 153 | ), 154 | ), 155 | ); 156 | } 157 | } 158 | ``` 159 | -------------------------------------------------------------------------------- /doc/widget/stack.md: -------------------------------------------------------------------------------- 1 | ## Stack 2 | 3 | > A widget that positions its children relative to the edges of its box. 4 | 5 | Stack可以类比CSS中的absolute（绝对布局），一般情况这个 Widget 只会用于显示比如图片之上的一些信息。它的布局行为对于 child Widget 来说只分 positioned 还是 non-positioned ，处理方式不同。 6 | 7 | - 如果是 positioned 的 child Widget 它的布局行为会根据设置的 top bottom right left 来确定 8 | - 如果是 non-positioned 的 child Widget 它的布局行为会根据 Stack 的aligment 对齐方式来处理 9 | - 对于 child Widget 的叠加处理是 List 第一个 child Widget 在最下层，last child Widget 在最上层，位置的顺序非常类似 CSS 中的 z-index 10 | 11 | 先让我们看一看 non-positioned 的效果图： 12 | 13 | ![](../images/flutter-61.png) 14 | 15 | ```dart 16 | import 'package:flutter/material.dart'; 17 | 18 | class AVStack extends StatelessWidget { 19 | @override 20 | Widget build(BuildContext context) { 21 | return new MaterialApp( 22 | home: new Scaffold( 23 | appBar: new AppBar( 24 | title: new Text('AVStack'), 25 | ), 26 | body: new Container( 27 | width: 200.0, 28 | height: 200.0, 29 | color: Colors.blue, 30 | child: new Stack( 31 | alignment: Alignment(0, 0), 32 | children: [ 33 | new Text( 34 | 'icepy' 35 | ), 36 | ], 37 | ), 38 | ) 39 | ), 40 | ); 41 | } 42 | } 43 | ``` 44 | 45 | 然后我们再来看一看 positioned 的效果图： 46 | 47 | ![](../images/flutter-62.png) 48 | 49 | ```dart 50 | import 'package:flutter/material.dart'; 51 | 52 | class AVStack extends StatelessWidget { 53 | @override 54 | Widget build(BuildContext context) { 55 | return new MaterialApp( 56 | home: new Scaffold( 57 | appBar: new AppBar( 58 | title: new Text('AVStack'), 59 | ), 60 | body: new Container( 61 | width: 200.0, 62 | height: 200.0, 63 | color: Colors.blue, 64 | child: new Stack( 65 | children: [ 66 | new Positioned( 67 | top: 10.0, 68 | right: 10.0, 69 | child: new Text( 70 | 'icepy' 71 | ), 72 | ) 73 | ], 74 | ), 75 | ) 76 | ), 77 | ); 78 | } 79 | } 80 | ``` 81 | 82 | ## IndexedStack 83 | 84 | > A Stack that shows a single child from a list of children. 85 | 86 | 这个 Widget 的作用和 Stack 非常类似，唯一的区别是如果你有三个 child Widget，那么它的布局行为是显示你指定的第index个 child Widget ，其他 child Widget 不可见。 87 | 88 | ![](../images/flutter-63.png) 89 | 90 | ```dart 91 | import 'package:flutter/material.dart'; 92 | 93 | class AVStack extends StatelessWidget { 94 | @override 95 | Widget build(BuildContext context) { 96 | return new MaterialApp( 97 | home: new Scaffold( 98 | appBar: new AppBar( 99 | title: new Text('AVStack'), 100 | ), 101 | body: new Container( 102 | width: 200.0, 103 | height: 200.0, 104 | color: Colors.blue, 105 | child: new IndexedStack( 106 | index: 1, 107 | children: [ 108 | new Container( 109 | width: 20.0, 110 | height: 20.0, 111 | color: Colors.grey, 112 | ), 113 | new Positioned( 114 | top: 10.0, 115 | right: 10.0, 116 | child: new Container( 117 | width: 50.0, 118 | height: 50.0, 119 | color: Colors.red, 120 | ), 121 | ) 122 | ], 123 | ), 124 | ) 125 | ), 126 | ); 127 | } 128 | } 129 | ``` -------------------------------------------------------------------------------- /doc/widget/transform.md: -------------------------------------------------------------------------------- 1 | ## Transform 2 | 3 | > A widget that applies a transformation before painting its child. 4 | 5 | Transform 作为一个很常用的处理 Widget 形变的 Widget 通常会使用在动画中，通过这个 Widget 的组合，就像 CSS 中的 transform 属性一样，我们可以很方便的做出来动效，先让我们来看一个小例子： 6 | 7 | ![](../images/flutter-65.png) 8 | 9 | ```dart 10 | import 'package:flutter/material.dart'; 11 | 12 | class AVTransform extends StatelessWidget { 13 | @override 14 | Widget build(BuildContext context) { 15 | return new MaterialApp( 16 | home: new Scaffold( 17 | appBar: new AppBar( 18 | title: new Text('AVTransform'), 19 | ), 20 | body: new Center( 21 | child: new Transform( 22 | transform: Matrix4.rotationZ(0.8), 23 | child: new Container( 24 | width: 50.0, 25 | height: 50.0, 26 | color: Colors.blue, 27 | ), 28 | ), 29 | ), 30 | ), 31 | ); 32 | } 33 | } 34 | ``` 35 | 36 | Transform Widget 继承 SingleChildRenderObjectWidget 通过阅读它的构造方法，我们可以看到该怎么使用它的参数： 37 | 38 | ```dart 39 | Transform({ 40 | Key key, 41 | @required this.transform, 42 | this.origin, 43 | this.alignment, 44 | this.transformHitTests = true, 45 | Widget child, 46 | }) 47 | ``` 48 | 49 | transform 参数是一个 Matrix4 类型，它就是我们来控制图形变换的一个很重要的属性，alignment 是它的对齐方式，origin 参数是一个 Offset 类型，如果你不想使用最基础的 Transform Widget ，也可以使用它已经提供好的一些便捷构造方法，如： 50 | 51 | - Transform.rotate 52 | - Transform.translate 53 | - Transform.scale 54 | 55 | 再来让我们看一个缩放的例子： 56 | 57 | ![](../images/flutter-66.png) 58 | 59 | ```dart 60 | import 'package:flutter/material.dart'; 61 | 62 | class AVTransform extends StatelessWidget { 63 | @override 64 | Widget build(BuildContext context) { 65 | return new MaterialApp( 66 | home: new Scaffold( 67 | appBar: new AppBar( 68 | title: new Text('AVTransform'), 69 | ), 70 | body: new Center( 71 | child: new Transform( 72 | transform: Matrix4.diagonal3Values(0.5, 0.5, 1), 73 | child: new Container( 74 | width: 50.0, 75 | height: 50.0, 76 | color: Colors.blue, 77 | ), 78 | ), 79 | ), 80 | ), 81 | ); 82 | } 83 | } 84 | ``` 85 | 86 | 运行流畅细腻入微的动画效果对于一个应用程序来讲非常的重要，Transform Widget 可以完成你想要的，让 Widget 动起来。 -------------------------------------------------------------------------------- /hello.dart: -------------------------------------------------------------------------------- 1 | void main(){ 2 | print('Hello icepy'); 3 | } --------------------------------------------------------------------------------