dnrops
/
dnrops.gitlink.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dnrops.gitlink.net/posts/dart/flutter.html

982 lines
65 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE HTML>
<html lang="en" class="coal" dir="ltr">
<head>
<!-- Book generated using mdBook -->
<meta charset="UTF-8">
<title>Flutter Cheat Sheet - Andrew&#x27;s Blog</title>
<!-- Custom HTML head -->
<meta name="description" content="Andrew Ryan&#x27;s Blog">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="../../favicon.svg">
<link rel="shortcut icon" href="../../favicon.png">
<link rel="stylesheet" href="../../css/variables.css">
<link rel="stylesheet" href="../../css/general.css">
<link rel="stylesheet" href="../../css/chrome.css">
<!-- Fonts -->
<link rel="stylesheet" href="../../FontAwesome/css/font-awesome.css">
<link rel="stylesheet" href="../../fonts/fonts.css">
<!-- Highlight.js Stylesheets -->
<link rel="stylesheet" href="../../highlight.css">
<link rel="stylesheet" href="../../tomorrow-night.css">
<link rel="stylesheet" href="../../ayu-highlight.css">
<!-- Custom theme stylesheets -->
<link rel="stylesheet" href="../../src/style/custom.css">
<!-- MathJax -->
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body class="sidebar-visible no-js">
<div id="body-container">
<!-- Provide site root to javascript -->
<script>
var path_to_root = "../../";
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "coal" : "coal";
</script>
<!-- Work around some values being stored in localStorage wrapped in quotes -->
<script>
try {
var theme = localStorage.getItem('mdbook-theme');
var sidebar = localStorage.getItem('mdbook-sidebar');
if (theme.startsWith('"') && theme.endsWith('"')) {
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
}
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
}
} catch (e) { }
</script>
<!-- Set the theme before any content is loaded, prevents flash -->
<script>
var theme;
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; }
var html = document.querySelector('html');
html.classList.remove('coal')
html.classList.add(theme);
var body = document.querySelector('body');
body.classList.remove('no-js')
body.classList.add('js');
</script>
<input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
<!-- Hide / unhide sidebar before it is displayed -->
<script>
var body = document.querySelector('body');
var sidebar = null;
var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
if (document.body.clientWidth >= 1080) {
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
sidebar = sidebar || 'visible';
} else {
sidebar = 'hidden';
}
sidebar_toggle.checked = sidebar === 'visible';
body.classList.remove('sidebar-visible');
body.classList.add("sidebar-" + sidebar);
</script>
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
<div class="sidebar-scrollbox">
<ol class="chapter"><li class="chapter-item affix "><a href="../../index.html">Andrew's Blog</a></li><li class="chapter-item "><a href="../../posts/linux/linux.html"><strong aria-hidden="true">1.</strong> linux</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/linux/install_linux.html"><strong aria-hidden="true">1.1.</strong> install linux</a></li><li class="chapter-item "><a href="../../posts/linux/bash_profile.html"><strong aria-hidden="true">1.2.</strong> bash profile</a></li><li class="chapter-item "><a href="../../posts/linux/command_list.html"><strong aria-hidden="true">1.3.</strong> command list</a></li><li class="chapter-item "><a href="../../posts/linux/git_guide.html"><strong aria-hidden="true">1.4.</strong> git guide</a></li><li class="chapter-item "><a href="../../posts/linux/tar.html"><strong aria-hidden="true">1.5.</strong> tar</a></li><li class="chapter-item "><a href="../../posts/linux/run_x86_elf_in_x64_setup.html"><strong aria-hidden="true">1.6.</strong> run x86 elf in x64 setup</a></li></ol></li><li class="chapter-item "><a href="../../posts/mac/mac.html"><strong aria-hidden="true">2.</strong> mac</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/mac/macos_profiles.html"><strong aria-hidden="true">2.1.</strong> macos profiles</a></li></ol></li><li class="chapter-item "><a href="../../posts/swift/swift.html"><strong aria-hidden="true">3.</strong> swift</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/swift/learn_swift.html"><strong aria-hidden="true">3.1.</strong> learn swift basics</a></li><li class="chapter-item "><a href="../../posts/swift/swift_extensions.html"><strong aria-hidden="true">3.2.</strong> Swift extensions</a></li><li class="chapter-item "><a href="../../posts/swift/swiftui_extension.html"><strong aria-hidden="true">3.3.</strong> SwiftUI extensions</a></li><li class="chapter-item "><a href="../../posts/swift/install_swift.html"><strong aria-hidden="true">3.4.</strong> install swift</a></li><li class="chapter-item "><a href="../../posts/swift/task_planner.html"><strong aria-hidden="true">3.5.</strong> implment task panner app with SwiftUI</a></li><li class="chapter-item "><a href="../../posts/swift/swift_cheat_sheet.html"><strong aria-hidden="true">3.6.</strong> Swift Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/swift/yinci_url.html"><strong aria-hidden="true">3.7.</strong> Personal privacy protocol</a></li><li class="chapter-item "><a href="../../posts/swift/swift_regular_exressions.html"><strong aria-hidden="true">3.8.</strong> Swift regular exressions</a></li><li class="chapter-item "><a href="../../posts/ios/how_to_create_beautiful_ios_charts_in_swift.html"><strong aria-hidden="true">3.9.</strong> How to Create Beautiful iOS Charts in鑱絊wift</a></li><li class="chapter-item "><a href="../../posts/swift/swiftui_source_code.html"><strong aria-hidden="true">3.10.</strong> SwiftUI source code</a></li><li class="chapter-item "><a href="../../posts/swift/use_swift_fetch_iciba_api.html"><strong aria-hidden="true">3.11.</strong> use swift fetch iciba API</a></li></ol></li><li class="chapter-item "><a href="../../posts/ios/ios.html"><strong aria-hidden="true">4.</strong> ios</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/ios/cocaposd_setup_and_install_for_ios_project.html"><strong aria-hidden="true">4.1.</strong> cocaposd setup and install for ios project</a></li><li class="chapter-item "><a href="../../posts/ios/swiftui_show_gif_image.html"><strong aria-hidden="true">4.2.</strong> SwiftUI show gif image</a></li><li class="chapter-item "><a href="../../posts/ios/implement_task_planner_app.html"><strong aria-hidden="true">4.3.</strong> implement Task planner App</a></li></ol></li><li class="chapter-item "><a href="../../posts/objective_c/objective_c.html"><strong aria-hidden="true">5.</strong> objective_c</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/objective_c/objective_c_cheat_sheet.html"><strong aria-hidden="true">5.1.</strong> Objective-C Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/objective_c/objective_c_for_absolute_beginners_read_note.html"><strong aria-hidden="true">5.2.</strong> Objective-C Note</a></li></ol></li><li class="chapter-item expanded "><a href="../../posts/dart/dart.html"><strong aria-hidden="true">6.</strong> dart</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../posts/dart/flutter.html" class="active"><strong aria-hidden="true">6.1.</strong> Flutter Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/dart/dart_cheat_sheet.html"><strong aria-hidden="true">6.2.</strong> Dart Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/flutter/flutter_dev_test.html"><strong aria-hidden="true">6.3.</strong> Flutter dev test</a></li></ol></li><li class="chapter-item "><a href="../../posts/rust/rust.html"><strong aria-hidden="true">7.</strong> rust</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/rust/offline_use_rust.html"><strong aria-hidden="true">7.1.</strong> Offline use rust</a></li><li class="chapter-item "><a href="../../posts/rust/rust_grammer.html"><strong aria-hidden="true">7.2.</strong> rust grammar</a></li><li class="chapter-item "><a href="../../posts/rust/pase_string_and_decimal_conversion.html"><strong aria-hidden="true">7.3.</strong> pase string and decimal conversion</a></li><li class="chapter-item "><a href="../../posts/rust/parse_types.html"><strong aria-hidden="true">7.4.</strong> rust types</a></li><li class="chapter-item "><a href="../../posts/rust/rust_life_cycle.html"><strong aria-hidden="true">7.5.</strong> Rust life cycle</a></li><li class="chapter-item "><a href="../../posts/rust/rust_generic.html"><strong aria-hidden="true">7.6.</strong> rust generics</a></li><li class="chapter-item "><a href="../../posts/rust/rust_implment_matrix.html"><strong aria-hidden="true">7.7.</strong> Rust implement matrix</a></li><li class="chapter-item "><a href="../../posts/rust/rust_sort.html"><strong aria-hidden="true">7.8.</strong> Rust implement sort algorithms</a></li><li class="chapter-item "><a href="../../posts/rust/implement_aes_encryption.html"><strong aria-hidden="true">7.9.</strong> Rust implement AEC encryption and decryption</a></li><li class="chapter-item "><a href="../../posts/rust/implement_trie_data_structure.html"><strong aria-hidden="true">7.10.</strong> implement trie data structure</a></li><li class="chapter-item "><a href="../../posts/rust/rust_implement_tree.html"><strong aria-hidden="true">7.11.</strong> implement tree data_structure</a></li><li class="chapter-item "><a href="../../posts/rust/list_dir.html"><strong aria-hidden="true">7.12.</strong> list dir</a></li><li class="chapter-item "><a href="../../posts/rust/fast_way_to_implment_object_trait.html"><strong aria-hidden="true">7.13.</strong> fast way to implment object trait</a></li><li class="chapter-item "><a href="../../posts/rust/compress_rust_binary_size.html"><strong aria-hidden="true">7.14.</strong> compress rust binary size</a></li><li class="chapter-item "><a href="../../posts/rust/implment_file_upload_backend.html"><strong aria-hidden="true">7.15.</strong> impliment file upload</a></li><li class="chapter-item "><a href="../../posts/rust/this_is_add_post_cli_implementation_in_rust.html"><strong aria-hidden="true">7.16.</strong> this is add_post cli implementation in rust</a></li><li class="chapter-item "><a href="../../posts/rust/use_rust_implment_a_copyclipbord_cli.html"><strong aria-hidden="true">7.17.</strong> Use rust implment a copyclipbord CLI</a></li><li class="chapter-item "><a href="../../posts/rust/sqlite_database_add_delete_update_show_in_rust.html"><strong aria-hidden="true">7.18.</strong> sqlite database add delete update show in rust</a></li><li class="chapter-item "><a href="../../posts/rust/implementing_tokio_joinhandle_for_wasm.html"><strong aria-hidden="true">7.19.</strong> Implementing tokio JoinHandle for wasm</a></li><li class="chapter-item "><a href="../../posts/rust/rust_implement_a_crate_for_encode_and_decode_brainfuck_and_ook.html"><strong aria-hidden="true">7.20.</strong> rust implement a crate for encode and decode brainfuck and ook</a></li><li class="chapter-item "><a href="../../posts/rust/slint_builtin_elements.html"><strong aria-hidden="true">7.21.</strong> Slint Builtin Elements</a></li><li class="chapter-item "><a href="../../posts/rust/corporate_network_install_rust_on_windows.html"><strong aria-hidden="true">7.22.</strong> Corporate network install Rust on windows</a></li><li class="chapter-item "><a href="../../posts/rust/rust_binary_file_how_to_judge_static_link_or_dynamic_link_in_macos.html"><strong aria-hidden="true">7.23.</strong> rust binary file how to judge static link or dynamic link in Macos</a></li><li class="chapter-item "><a href="../../posts/rust/rust_binary_include_dir_and_get_contents.html"><strong aria-hidden="true">7.24.</strong> rust binary include dir and get contents</a></li><li class="chapter-item "><a href="../../posts/rust/rust_logger_non-block.html"><strong aria-hidden="true">7.25.</strong> rust logger non-block</a></li><li class="chapter-item "><a href="../../posts/rust/rust_connect_sql_server_database.html"><strong aria-hidden="true">7.26.</strong> rust connect sql server database</a></li><li class="chapter-item "><a href="../../posts/rust/rust_websocket_implment.html"><strong aria-hidden="true">7.27.</strong> rust websocket implment</a></li></ol></li><li class="chapter-item "><a href="../../posts/java/java.html"><strong aria-hidden="true">8.</strong> java</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/java/java_grammar.html"><strong aria-hidden="true">8.1.</strong> java grammar and codewar</a></li><li class="chapter-item "><a href="../../posts/java/run_jar.html"><strong aria-hidden="true">8.2.</strong> java run .jar</a></li><li class="chapter-item "><a href="../../posts/java/java_pomxml_add_defaultgoal_to_build.html"><strong aria-hidden="true">8.3.</strong> Java pomxml add defaultGoal to build</a></li><li class="chapter-item "><a href="../../posts/java/java_set_mvn_mirror.html"><strong aria-hidden="true">8.4.</strong> Java set mvn mirror</a></li></ol></li><li class="chapter-item "><a href="../../posts/python/python.html"><strong aria-hidden="true">9.</strong> python</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/python/convert_pesn.html"><strong aria-hidden="true">9.1.</strong> convert pesn</a></li><li class="chapter-item "><a href="../../posts/python/find_remove_dir.html"><strong aria-hidden="true">9.2.</strong> find and remove dir</a></li><li class="chapter-item "><a href="../../posts/python/timing_message.html"><strong aria-hidden="true">9.3.</strong> wechat send message</a></li><li class="chapter-item "><a href="../../posts/python/use_python_openpyxl_package_read_and_edit_excel_files.html"><strong aria-hidden="true">9.4.</strong> Use python openpyxl package read and edit excel files</a></li></ol></li><li class="chapter-item "><a href="../../posts/go/go.html"><strong aria-hidden="true">10.</strong> go</a></li><li class="chapter-item "><a href="../../posts/js/js.html"><strong aria-hidden="true">11.</strong> js</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/js/js_tutorial.html"><strong aria-hidden="true">11.1.</strong> js tutorial</a></li><li class="chapter-item "><a href="../../posts/js/js_tutorial_map.html"><strong aria-hidden="true">11.2.</strong> ja map</a></li><li class="chapter-item "><a href="../../posts/js/js_tutorial_math.html"><strong aria-hidden="true">11.3.</strong> js math</a></li><li class="chapter-item "><a href="../../posts/js/js_tutorial_object.html"><strong aria-hidden="true">11.4.</strong> js object</a></li><li class="chapter-item "><a href="../../posts/js/js_tutorial_set.html"><strong aria-hidden="true">11.5.</strong> js set</a></li><li class="chapter-item "><a href="../../posts/js/single_thread_and_asynchronous.html"><strong aria-hidden="true">11.6.</strong> single thread and asynchronous</a></li><li class="chapter-item "><a href="../../posts/js/this.html"><strong aria-hidden="true">11.7.</strong> js this</a></li><li class="chapter-item "><a href="../../posts/js/js_implment_aes.html"><strong aria-hidden="true">11.8.</strong> js implment aes</a></li><li class="chapter-item "><a href="../../posts/js/getting_started_with_ajax.html"><strong aria-hidden="true">11.9.</strong> getting started with ajax</a></li><li class="chapter-item "><a href="../../posts/js/BinarySearchTree.html"><strong aria-hidden="true">11.10.</strong> binary search tree</a></li><li class="chapter-item "><a href="../../posts/js/goole_zx.html"><strong aria-hidden="true">11.11.</strong> goole zx</a></li><li class="chapter-item "><a href="../../posts/js/es6.html"><strong aria-hidden="true">11.12.</strong> es6</a></li></ol></li><li class="chapter-item "><a href="../../posts/ruby/ruby.html"><strong aria-hidden="true">12.</strong> ruby</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/ruby/rails_setup_env.html"><strong aria-hidden="true">12.1.</strong> ruby on rails setup environment</a></li><li class="chapter-item "><a href="../../posts/ruby/learn_ruby.html"><strong aria-hidden="true">12.2.</strong> learn ruby</a></li><li class="chapter-item "><a href="../../posts/ruby/ruby_note.html"><strong aria-hidden="true">12.3.</strong> Ruby Note</a></li><li class="chapter-item "><a href="../../posts/ruby/setup_ruby_for_ctf.html"><strong aria-hidden="true">12.4.</strong> Setup ruby for CTF</a></li></ol></li><li class="chapter-item "><a href="../../posts/react/react.html"><strong aria-hidden="true">13.</strong> react</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/react/react_life_cycle.html"><strong aria-hidden="true">13.1.</strong> react life cycle</a></li><li class="chapter-item "><a href="../../posts/react/react_router.html"><strong aria-hidden="true">13.2.</strong> react router</a></li><li class="chapter-item "><a href="../../posts/react/react_this.html"><strong aria-hidden="true">13.3.</strong> react this</a></li><li class="chapter-item "><a href="../../posts/react/react_interviw.html"><strong aria-hidden="true">13.4.</strong> react interview</a></li><li class="chapter-item "><a href="../../posts/react/important_react_interview.html"><strong aria-hidden="true">13.5.</strong> important react interview</a></li><li class="chapter-item "><a href="../../posts/react/react_quick_reference.html"><strong aria-hidden="true">13.6.</strong> react quick reference</a></li><li class="chapter-item "><a href="../../posts/react/redux_quick_reference.html"><strong aria-hidden="true">13.7.</strong> redux quick reference</a></li></ol></li><li class="chapter-item "><a href="../../posts/vue/vue.html"><strong aria-hidden="true">14.</strong> vue</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/vue/vue_ajax.html"><strong aria-hidden="true">14.1.</strong> vue ajax</a></li></ol></li><li class="chapter-item "><a href="../../posts/angular/angular.html"><strong aria-hidden="true">15.</strong> angular</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/angular/controller_communication.html"><strong aria-hidden="true">15.1.</strong> controller communication</a></li><li class="chapter-item "><a href="../../posts/angular/creating_custom_directives.html"><strong aria-hidden="true">15.2.</strong> creating custom directives</a></li><li class="chapter-item "><a href="../../posts/angular/directive_notes.html"><strong aria-hidden="true">15.3.</strong> directive notes</a></li><li class="chapter-item "><a href="../../posts/angular/directive_communication.html"><strong aria-hidden="true">15.4.</strong> directive communication</a></li><li class="chapter-item "><a href="../../posts/angular/post_params.html"><strong aria-hidden="true">15.5.</strong> post params</a></li><li class="chapter-item "><a href="../../posts/angular/read_json_angular.html"><strong aria-hidden="true">15.6.</strong> read json angular</a></li><li class="chapter-item "><a href="../../posts/angular/same_route_reload.html"><strong aria-hidden="true">15.7.</strong> same route reload</a></li></ol></li><li class="chapter-item "><a href="../../posts/css/css.html"><strong aria-hidden="true">16.</strong> css</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/css/use_css_media.html"><strong aria-hidden="true">16.1.</strong> use css media</a></li></ol></li><li class="chapter-item "><a href="../../posts/php/php.html"><strong aria-hidden="true">17.</strong> php</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/php/for_php_string_implment_some_extemtion_functions.html"><strong aria-hidden="true">17.1.</strong> for php string implment some extemtion functions</a></li><li class="chapter-item "><a href="../../posts/php/php_cheatsheet.html"><strong aria-hidden="true">17.2.</strong> PHP cheatsheet</a></li></ol></li><li class="chapter-item "><a href="../../posts/leetcode/leetcode.html"><strong aria-hidden="true">18.</strong> leetcode</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/leetcode/rust_leetcode.html"><strong aria-hidden="true">18.1.</strong> rust leetcode</a></li><li class="chapter-item "><a href="../../posts/leetcode/rust_codewar.html"><strong aria-hidden="true">18.2.</strong> rust codewar</a></li><li class="chapter-item "><a href="../../posts/leetcode/swift_codewar.html"><strong aria-hidden="true">18.3.</strong> swift codewar</a></li><li class="chapter-item "><a href="../../posts/leetcode/js_leetcode.html"><strong aria-hidden="true">18.4.</strong> js leetcode</a></li><li class="chapter-item "><a href="../../posts/leetcode/java_leetcode.html"><strong aria-hidden="true">18.5.</strong> java leetcode</a></li><li class="chapter-item "><a href="../../posts/leetcode/rust_huawei.html"><strong aria-hidden="true">18.6.</strong> huawei test</a></li><li class="chapter-item "><a href="../../posts/leetcode/rust_utils.html"><strong aria-hidden="true">18.7.</strong> rust common functions</a></li><li class="chapter-item "><a href="../../posts/leetcode/olympiad_training.html"><strong aria-hidden="true">18.8.</strong> Computer olympiad training</a></li></ol></li><li class="chapter-item "><a href="../../posts/ctf/CTF.html"><strong aria-hidden="true">19.</strong> ctf</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/ctf/CTF_Note.html"><strong aria-hidden="true">19.1.</strong> CTF Note</a></li><li class="chapter-item "><a href="../../posts/ctf/0.1_Web.html"><strong aria-hidden="true">19.2.</strong> Web</a></li><li class="chapter-item "><a href="../../posts/ctf/4.1_Misc.html"><strong aria-hidden="true">19.3.</strong> Misc</a></li><li class="chapter-item "><a href="../../posts/ctf/3.2_PWN_note.html"><strong aria-hidden="true">19.4.</strong> PWN</a></li><li class="chapter-item "><a href="../../posts/ctf/3.1_Crypto.html"><strong aria-hidden="true">19.5.</strong> Crypto</a></li><li class="chapter-item "><a href="../../posts/ctf/3.4_RSA_note.html"><strong aria-hidden="true">19.6.</strong> Rsa attack</a></li><li class="chapter-item "><a href="../../posts/ctf/3.5_Base64.html"><strong aria-hidden="true">19.7.</strong> Base64</a></li><li class="chapter-item "><a href="../../posts/ctf/0.0_SQL Injection Cheatsheet.html"><strong aria-hidden="true">19.8.</strong> SQL Injection Cheatsheet</a></li><li class="chapter-item "><a href="../../posts/ctf/1.1_SQL_injection.html"><strong aria-hidden="true">19.9.</strong> SQL Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.2_SQL_injection_UNION_attacks.html"><strong aria-hidden="true">19.10.</strong> SQL Injection UNION attacks</a></li><li class="chapter-item "><a href="../../posts/ctf/1.3_Blind SQL injection.html"><strong aria-hidden="true">19.11.</strong> Blind SQL Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.4_Code Injection.html"><strong aria-hidden="true">19.12.</strong> Code Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.5_SSRF.html"><strong aria-hidden="true">19.13.</strong> SSRF</a></li><li class="chapter-item "><a href="../../posts/ctf/1.6_OS command injection.html"><strong aria-hidden="true">19.14.</strong> OS command injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.7_Local file inclusion.html"><strong aria-hidden="true">19.15.</strong> Local file inclusion</a></li><li class="chapter-item "><a href="../../posts/ctf/1.8_Remote file inclusion.html"><strong aria-hidden="true">19.16.</strong> Remote file inclusion</a></li><li class="chapter-item "><a href="../../posts/ctf/1.9_CSRFm.html"><strong aria-hidden="true">19.17.</strong> CSRF</a></li><li class="chapter-item "><a href="../../posts/ctf/1.10_NoSQL injection.html"><strong aria-hidden="true">19.18.</strong> NoSQL injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.11_JSON injection.html"><strong aria-hidden="true">19.19.</strong> JSON injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.12_CTF_Web_SQL_Note.html"><strong aria-hidden="true">19.20.</strong> CTF Web SQL Note</a></li><li class="chapter-item "><a href="../../posts/ctf/2.1_XXE.html"><strong aria-hidden="true">19.21.</strong> XXE</a></li><li class="chapter-item "><a href="../../posts/ctf/2.2_XSS.html"><strong aria-hidden="true">19.22.</strong> XSS</a></li><li class="chapter-item "><a href="../../posts/ctf/2.3_Upload File.html"><strong aria-hidden="true">19.23.</strong> Upload File</a></li><li class="chapter-item "><a href="../../posts/ctf/2.4_serialize_unserialize.html"><strong aria-hidden="true">19.24.</strong> serialize unserialize</a></li><li class="chapter-item "><a href="../../posts/ctf/2.5_Race condition.html"><strong aria-hidden="true">19.25.</strong> Race condition</a></li><li class="chapter-item "><a href="../../posts/ctf/3.2_PWN_note.html"><strong aria-hidden="true">19.26.</strong> PWN_note</a></li><li class="chapter-item "><a href="../../posts/ctf/3.3_pwn HCTF2016 brop.html"><strong aria-hidden="true">19.27.</strong> pwn HCTF2016 brop</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_patch_defense_skill.html"><strong aria-hidden="true">19.28.</strong> PWN Patch defense skill</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_stack_overflow.html"><strong aria-hidden="true">19.29.</strong> PWN stack overflow</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_heap_overflow.html"><strong aria-hidden="true">19.30.</strong> PWN heap overflow</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_format_string_vulnerability.html"><strong aria-hidden="true">19.31.</strong> PWN Format String Vulnerability</a></li><li class="chapter-item "><a href="../../posts/ctf/kali_linux_tutorials.html"><strong aria-hidden="true">19.32.</strong> Kali linux tutorials</a></li><li class="chapter-item "><a href="../../posts/ctf/google_dorks_2023_lists.html"><strong aria-hidden="true">19.33.</strong> Google Dorks 2023 Lists</a></li><li class="chapter-item "><a href="../../posts/ctf/dvwa_writeup.html"><strong aria-hidden="true">19.34.</strong> DVWA WriteUp</a></li><li class="chapter-item "><a href="../../posts/ctf/bwapp_writeup.html"><strong aria-hidden="true">19.35.</strong> bWAPP WriteUp</a></li><li class="chapter-item "><a href="../../posts/ctf/sqlilabs_writeup.html"><strong aria-hidden="true">19.36.</strong> sqlilabs WriteUp</a></li><li class="chapter-item "><a href="../../posts/ctf/ctf_train_at_hangzhou.html"><strong aria-hidden="true">19.37.</strong> ctf train at hangzhou</a></li><li class="chapter-item "><a href="../../posts/ctf/ctf_common_mindmap_list.html"><strong aria-hidden="true">19.38.</strong> ctf common mindmap list</a></li><li class="chapter-item "><a href="../../posts/ctf/error_based_sql_injection.html"><strong aria-hidden="true">19.39.</strong> Error Based SQL Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/urlfinder_tutorial.html"><strong aria-hidden="true">19.40.</strong> URLFinder Tutorial</a></li><li class="chapter-item "><a href="../../posts/ctf/observer_ward_tutorial.html"><strong aria-hidden="true">19.41.</strong> observer_ward Tutorial</a></li><li class="chapter-item "><a href="../../posts/ctf/mysql_udf_.html"><strong aria-hidden="true">19.42.</strong> MySQL UDF 提权</a></li><li class="chapter-item "><a href="../../posts/ctf/nuclei__tutorial.html"><strong aria-hidden="true">19.43.</strong> Nuclei Tutorial</a></li><li class="chapter-item "><a href="../../posts/ctf/2024_ctf_solution_thinking.html"><strong aria-hidden="true">19.44.</strong> 2024 ctf solution thinking</a></li><li class="chapter-item "><a href="../../posts/ctf/man_che_si_te_bian_ma.html"><strong aria-hidden="true">19.45.</strong> 曼彻斯特编码</a></li></ol></li></ol>
</div>
<div id="sidebar-resize-handle" class="sidebar-resize-handle">
<div class="sidebar-resize-indicator"></div>
</div>
</nav>
<!-- Track and set sidebar scroll position -->
<script>
var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
sidebarScrollbox.addEventListener('click', function(e) {
if (e.target.tagName === 'A') {
sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
}
}, { passive: true });
var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
sessionStorage.removeItem('sidebar-scroll');
if (sidebarScrollTop) {
// preserve sidebar scroll position when navigating via links within sidebar
sidebarScrollbox.scrollTop = sidebarScrollTop;
} else {
// scroll sidebar to current active section when navigating via "next/previous chapter" buttons
var activeSection = document.querySelector('#sidebar .active');
if (activeSection) {
activeSection.scrollIntoView({ block: 'center' });
}
}
</script>
<div id="page-wrapper" class="page-wrapper">
<div class="page">
<div id="menu-bar-hover-placeholder"></div>
<div id="menu-bar" class="menu-bar sticky">
<div class="left-buttons">
<label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
<i class="fa fa-bars"></i>
</label>
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
<i class="fa fa-paint-brush"></i>
</button>
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
<li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
</ul>
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
<i class="fa fa-search"></i>
</button>
</div>
<h1 class="menu-title">Andrew&#x27;s Blog</h1>
<div class="right-buttons">
<a href="https://gitlink.org.cn/dnrops/dnrops.gitlink.net.git" title="Git repository" aria-label="Git repository">
<i id="git-repository-button" class="fa fa-github"></i>
</a>
</div>
</div>
<div id="search-wrapper" class="hidden">
<form id="searchbar-outer" class="searchbar-outer">
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
</form>
<div id="searchresults-outer" class="searchresults-outer hidden">
<div id="searchresults-header" class="searchresults-header"></div>
<ul id="searchresults">
</ul>
</div>
</div>
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
<script>
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
});
</script>
<div id="content" class="content">
<main>
<h1 id="flutter-cheat-sheet"><a class="header" href="#flutter-cheat-sheet">Flutter Cheat Sheet</a></h1>
<p>You need to get started quickly with Flutter? Here are some cheats that will help you get started with developing your next billion dollar app!!</p>
<h2 id="table-of-contents"><a class="header" href="#table-of-contents">Table of Contents</a></h2>
<ul>
<li><a href="#Installation">Installation</a></li>
<li><a href="#layouts">Layouts</a></li>
<li><a href="#aligning-widgets-evenly">Aligning widgets evenly</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#navigation">Navigation</a></li>
<li><a href="#actionbar">ActionBar</a></li>
<li><a href="#tabs">Swipeable actionbar tabs</a></li>
<li><a href="#form-validations">Form validations</a></li>
</ul>
<h2 id="installation"><a class="header" href="#installation">Installation</a></h2>
<h3 id="a-windows"><a class="header" href="#a-windows">A. Windows</a></h3>
<h4 id="step-1"><a class="header" href="#step-1">STEP 1</a></h4>
<p>To get started with Flutter, your dev environment must meet the following requirements</p>
<div class="table-wrapper"><table><thead><tr><th>Operating Systems</th><th style="text-align: center">Windows 7 SP1 or later (64-bit)</th></tr></thead><tbody>
<tr><td>Disk Space</td><td style="text-align: center">400 MB (does not include disk space for IDE/tools)</td></tr>
<tr><td>Tool</td><td style="text-align: center">Windows PowerShell 5.0 or newer</td></tr>
<tr><td>Tool</td><td style="text-align: center">Git for Windows 2.x</td></tr>
<tr><td>You can choose either the first tool or second depending on how comfortable you are with either.</td><td style="text-align: center"></td></tr>
</tbody></table>
</div>
<h4 id="step-2"><a class="header" href="#step-2">STEP 2</a></h4>
<ul>
<li>Download an installation bundle <a href="https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.2.1-stable.zip">here</a> to get the latest stable release of the Flutter SDK</li>
<li>Extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (eg. C:\src\flutter; do not install Flutter in a directory like C:\Program Files\ that requires elevated privileges ).</li>
<li>Locate the file flutter_console.bat inside the flutter directory. Start it by double-clicking.
Congratulations! You are now ready to run Flutter commands in the Flutter Console!
NOTE: Should you at anytime require an ugrade to a latest Flutter version? <a href="https://flutter.dev/docs/development/tools/sdk/upgrading">Use this link</a></li>
</ul>
<h4 id="step-3-optional"><a class="header" href="#step-3-optional">STEP 3 (Optional)</a></h4>
<p>If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable:</p>
<ul>
<li>From the Start search bar, type ‘env’ and select Edit environment variables for your account</li>
<li>Under User variables check if there is an entry called Path(If it exist append the full path to flutter\bin using ; as a separator from existing values else create a new user variable named Path with the full path to flutter\bin as its value)</li>
</ul>
<h4 id="step-4"><a class="header" href="#step-4">STEP 4</a></h4>
<p>If at any point you need to check your environment and see a report of the status of your Flutter installation, all you need is the command below.</p>
<pre><code class="language-windows">flutter doctor
</code></pre>
<p>Here is a sample output:</p>
<pre><code class="language-windows">[-] Android toolchain - develop for Android devices
• Android SDK at D:\Android\sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://flutter.dev/setup/#android-setup for detailed instructions.
</code></pre>
<p>Ensure you check the output carefully for other software you may need to install or further tasks to perform (shown in bold text).</p>
<h3 id="android-setup"><a class="header" href="#android-setup">Android setup</a></h3>
<p>Wondering why we need android studio setup?Here is why:
Flutter relies on a full installation of Android Studio to supply its Android platform dependencies.You can however write flutter apps on other IDEs such as Visual studio code.</p>
<h5 id="install-android-studio"><a class="header" href="#install-android-studio">Install Android Studio</a></h5>
<ul>
<li>
<p>Download and install Android Studio from <a href="https://developer.android.com/studio/?gclid=Cj0KCQjwsZ3kBRCnARIsAIuAV_RMbMDTLk-O1LOvm7MXD_o2diOYLqz4KPIBrpfUnw_2fAuE44y5K5waAt5EEALw_wcB">here</a>.</p>
</li>
<li>
<p>Launch Android Studio, and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.</p>
</li>
</ul>
<h5 id="set-up-your-android-device"><a class="header" href="#set-up-your-android-device">Set up your Android device</a></h5>
<p>One of the coolest thing about Flutter is that you can run your Flutter app on android device without writing complex commands. Here is how I did it.
First thing first, to prepare to run and test your Flutter app on an Android device, you’ll need an Android device running <strong>Android 4.1 (API level 16) or higher</strong>.
<strong>Other necessary steps to follow:</strong></p>
<ul>
<li>Enable Developer options and USB debugging on your device. <strong>Go to Settings &gt; Developer options &gt;USB debugging</strong>.</li>
<li>Windows-only: Install the Google USB Driver</li>
<li>Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device.</li>
<li>In your android studio terminal or command prompt, run the <code> flutter devices</code> command to verify that Flutter recognizes your connected Android device.</li>
</ul>
<h4 id="set-up-the-android-emulator"><a class="header" href="#set-up-the-android-emulator">Set up the Android emulator</a></h4>
<p>To prepare to run and test your Flutter app on the Android emulator for some reasons :), follow these steps:</p>
<ul>
<li>Enable VM acceleration on your machine.</li>
<li>Launch <strong>Android Studio &gt; Tools &gt; Android &gt; AVD Manager</strong> and select Create Virtual Device. (The Android submenu is only present when inside an Android project.)</li>
<li>Choose a device definition and select <strong>Next</strong>.</li>
<li>Select one or more system images for the Android versions you want to emulate, and select <strong>Next</strong>. An x86 or x86_64 image is recommended.</li>
<li>Under Emulated Performance, select <strong>Hardware - GLES 2.0</strong> to enable hardware acceleration.</li>
<li>Verify the AVD configuration is correct, and select Finish.
In Android Virtual Device Manager, click <strong>Run</strong> in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.</li>
</ul>
<h3 id="b-mac"><a class="header" href="#b-mac">B. Mac</a></h3>
<h4 id="step-1-1"><a class="header" href="#step-1-1">STEP 1</a></h4>
<p>To get started with Flutter, your dev environment must meet the following requirements</p>
<div class="table-wrapper"><table><thead><tr><th>Operating Systems</th><th style="text-align: center">macOS (64-bit)</th></tr></thead><tbody>
<tr><td>Disk Space</td><td style="text-align: center">700 MB (does not include disk space for IDE/tools)</td></tr>
<tr><td>Tool</td><td style="text-align: center">bash, curl, git 2.x, mkdir, rm, unzip, which</td></tr>
<tr><td>NOTE: You can pick any tool you are comfortable with.</td><td style="text-align: center"></td></tr>
</tbody></table>
</div>
<h4 id="step-2-1"><a class="header" href="#step-2-1">STEP 2</a></h4>
<ul>
<li>Download an installation bundle <a href="https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.2.1-stable.zip">here</a> to get the latest stable release of the Flutter SDK</li>
<li>Extract the file in the desired location.</li>
</ul>
<pre><code class="language-windows">cd ~/development
unzip ~/Downloads/flutter_macos_v1.2.1-stable.zip
</code></pre>
<ul>
<li>Add the flutter tool to your path.</li>
</ul>
<pre><code class="language-windows">export PATH="$PATH:`pwd`/flutter/bin"
</code></pre>
<p>This command sets your PATH variable for the current terminal window only.
To permanently add Flutter to your path, follow the steps below:</p>
<ul>
<li>Determine the directory where you placed the Flutter SDK.</li>
<li>Open (or create) $HOME/.bash_profile. The file path and filename might be different on your machine.</li>
<li>Add the following line and change [PATH_TO_FLUTTER_GIT_DIRECTORY] to be the path where you cloned Flutter’s git repo:</li>
</ul>
<pre><code class="language-windows">export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
</code></pre>
<ul>
<li>Run source $HOME/.bash_profile to refresh the current window.</li>
<li>Verify that the flutter/bin directory is now in your PATH by running:</li>
</ul>
<pre><code class="language-windows">echo $PATH
</code></pre>
<p>Congratulations! You are now ready to run Flutter commands in the Flutter Console!
NOTE: Should you at anytime require an ugrade to a latest Flutter version? <a href="https://flutter.dev/docs/development/tools/sdk/upgrading">Use this link</a></p>
<h4 id="step-3-optional-1"><a class="header" href="#step-3-optional-1">STEP 3 (Optional)</a></h4>
<p>If at any point you need to check your environment and see a report of the status of your Flutter installation, all you need is the command below.</p>
<pre><code class="language-windows">flutter doctor
</code></pre>
<p>Here is a sample output:</p>
<pre><code class="language-windows">[-] Android toolchain - develop for Android devices
• Android SDK at D:\Android\sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://flutter.dev/setup/#android-setup for detailed instructions.
</code></pre>
<p>Ensure you check the output carefully for other software you may need to install or further tasks to perform (shown in bold text).</p>
<h2 id="layouts"><a class="header" href="#layouts">Layouts</a></h2>
<h3 id="card-layout"><a class="header" href="#card-layout">Card Layout</a></h3>
<pre><code class="language-dart">@override
Widget build(BuildContext context) {
return Card(
// Set elevation value here
elevation: 4.0,
child: Container(
color: Palette.White, // set card's color
padding: EdgeInsets.symmetric(vertical: 8.0), // Set layout padding
child: Row(
children: &lt;Widget&gt;[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
title, // Set the text value
style: TextStyles.caption, //Set your custom style here
),
Text(
body, // Set the text value
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500, // Set font weight
color: Colors.black87, // Set text color
),
),
],
),
),
),
],
),
),
);
}
</code></pre>
<h2 id="aligning-widgets-evenly"><a class="header" href="#aligning-widgets-evenly">Aligning widgets evenly</a></h2>
<h3 id="horizontal-mainaxisalignment"><a class="header" href="#horizontal-mainaxisalignment">Horizontal MainAxisAlignment</a></h3>
<p>Setting the main axis alignment to spaceEvenly divides the free horizontal space
evenly between, before, and after each image
<img src="../../img_list/img1.PNG" alt="alt text" /></p>
<pre><code class="language-dart">Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset('img/1.jpg'),
Image.asset('img/2.jpg'),
Image.asset('img/3.jpg'),
],
);
</code></pre>
<h3 id="vertical-mainaxisalignment"><a class="header" href="#vertical-mainaxisalignment">Vertical MainAxisAlignment</a></h3>
<p>Setting the main axis alignment to spaceEvenly divides the free vertical space
evenly between, before, and after each image
<img src="../../img_list/img2.PNG" alt="alt text" /></p>
<pre><code class="language-dart">Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset('img/1.jpg'),
Image.asset('img/2.jpg'),
Image.asset('img/3.jpg'),
],
);
</code></pre>
<h3 id="packing-widgets"><a class="header" href="#packing-widgets">Packing Widgets</a></h3>
<p>By default, a row or column occupies as much space along its main axis as possible,
but if you want to pack the children closely together, set its mainAxisSize to MainAxisSize.min.
The following example uses this property to pack 3 buttons together.</p>
<img src="../../img_list/Packing-widget.png" width="280"/>
<pre><code class="language-dart">new Row(
mainAxisSize: MainAxisSize.min, // This is the magic. :)
children: &lt;Widget&gt;[
new RaisedButton(
padding: const EdgeInsets.all(8.0),
textColor: Colors.white,
color: Colors.blue,
onPressed: onClick, // Button onClick function
child: new Text("Button 1"),
),
new RaisedButton(
onPressed: subtractNumbers,
textColor: Colors.white,
color: Colors.red,
padding: const EdgeInsets.all(8.0),
child: new Text(
"Button 2",
),
),
new RaisedButton(
onPressed: subtractNumbers,
textColor: Colors.white,
color: Colors.red,
padding: const EdgeInsets.all(8.0),
child: new Text(
"Button 3",
),
),
],
)
</code></pre>
<h2 id="buttons"><a class="header" href="#buttons">Buttons</a></h2>
<h3 id="raised-button-effect"><a class="header" href="#raised-button-effect">Raised Button Effect</a></h3>
<p>A Raised button is based on a Material widget whose Material.elevation increases when the button is pressed.
Do you want to add an elevation effect to your button? Use the snippet below
Please avoid using elevated buttons on already-elevated content such as dialogs or cards.</p>
<img src="../../img_list/Raised-button.png" width="280"/>
<pre><code class="language-dart">new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: &lt;Widget&gt;[
new RaisedButton(
padding: const EdgeInsets.all(8.0),
textColor: Colors.white,
color: Colors.blue,
onPressed: onClick, // Button onClick function
child: new Text("Plus"),
),
new RaisedButton(
onPressed: subtractNumbers,
textColor: Colors.white,
color: Colors.red,
padding: const EdgeInsets.all(8.0),
child: new Text(
"Minus",
),
),
],
)
</code></pre>
<h3 id="toggle-effect"><a class="header" href="#toggle-effect">Toggle Effect</a></h3>
<p>You can toggle the color of a raised button with few lines. The snippet below shows how you can achieve this.</p>
<img src="../../img_list/toggle-button.png" width="280"/>
<pre><code class="language-dart">1. This button will need to be created in the build of a State of a StatefulWidget
2. The State must have a member variable bool isPressed = false;;
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: &lt;Widget&gt;[
new RaisedButton(
child: new Text('Toggle me!'),
textColor: Colors.white,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: isPressed ? Colors.grey : Colors.blue,
onPressed: () =&gt; setState(() =&gt; isPressed = !isPressed), // make state changes in a setState
)
],
)
</code></pre>
<h3 id="floating-action-button"><a class="header" href="#floating-action-button">Floating Action Button</a></h3>
<p>Creating a simple FAB using the code snippet below</p>
<img src="../../img_list/fab-button.png" width="280"/>
<pre><code class="language-dart">return new Scaffold(
appBar: new AppBar(
title: new Text("FAB Example"),
),
floatingActionButton: FloatingActionButton(
onPressed: () =&gt; {},
tooltip: 'Add me!',
child: Icon(Icons.add),
),
body:...
);
</code></pre>
<h2 id="actionbar"><a class="header" href="#actionbar">ActionBar</a></h2>
<p>You can use flutter’s AppBar just with one line of code.</p>
<pre><code class="language-dart">return new Scaffold(
appBar: new AppBar(
title: new Text("AppBar Demo"),
),);
</code></pre>
<h2 id="navigation"><a class="header" href="#navigation">Navigation</a></h2>
<h3 id="bottom-navigation-bar"><a class="header" href="#bottom-navigation-bar">Bottom Navigation Bar</a></h3>
<p>Creating bottom navigation in flutter is fatanstic, truth be told! I thought I’d write some complex code to make this happen. But see how I achieved it!</p>
<h4 id="create-a-bottom-navigation-bar-without-style"><a class="header" href="#create-a-bottom-navigation-bar-without-style">Create a Bottom Navigation Bar without style</a></h4>
<img src="../../img_list/bottom-bar-1.png" width="280"/>
<pre><code class="language-dart">return new Scaffold(
appBar: new AppBar(
title: new Text("FAB Example"),
),
bottomNavigationBar:BottomNavigationBar(
currentIndex: 0, // Set initial state of BottomNavigationBar
items: [ // Create your BottomNavigationBar items
BottomNavigationBarItem(
icon: new Icon(Icons.playlist_add),
title: new Text("Playlist"),
),
BottomNavigationBarItem(
icon: new Icon(Icons.person),
title: new Text("My Profile")
),
BottomNavigationBarItem(
icon: new Icon(Icons.mail),
title: new Text("Inbox")
)
],
),
body:...
);
</code></pre>
<h4 id="create-a-bottom-navigation-bar-with-custom-style"><a class="header" href="#create-a-bottom-navigation-bar-with-custom-style">Create a Bottom Navigation Bar with custom style</a></h4>
<img src="../../img_list/bottom-bar-2.png" width="280"/>
<pre><code class="language-dart">return new Scaffold(
appBar: new AppBar(
title: new Text("FAB Example"),
),
bottomNavigationBar: Theme( // Create your custom style with Flutter Theme
data: Theme.of(context).copyWith(
canvasColor: Colors.blueAccent, // Choose your preferred color as the BottomNavigationBar background
primaryColor: Colors.white30, // Choose your preferred color as the primary color
textTheme: Theme.of(context) // The text theme goes here
.textTheme
.copyWith(caption: new TextStyle(color: Colors.white))),
child: BottomNavigationBar(
currentIndex: 0, // Set initial state of BottomNavigationBar
items: [ // Create your BottomNavigationBar items
BottomNavigationBarItem(
icon: new Icon(Icons.playlist_add),
title: new Text("Playlist"),
),
BottomNavigationBarItem(
icon: new Icon(Icons.person), title: new Text("My Profile")),
BottomNavigationBarItem(
icon: new Icon(Icons.mail), title: new Text("Inbox"))
],
),
),
body:...
);
</code></pre>
<h3 id="prepare-for-navigation"><a class="header" href="#prepare-for-navigation">Prepare for Navigation</a></h3>
<p>You’d definetly want to navigate between multiple pages using bottom navigation bar. Here is how you can do that seamlessly!</p>
<h5 id="step-1-2"><a class="header" href="#step-1-2">Step 1:</a></h5>
<p>Add two new instance properties to your State class. Something like this:</p>
<pre><code class="language-dart">class _FreeDemoState extends State&lt;FreeDemo&gt; {
int _currentIndex = 0;
final List&lt;Widget&gt; _children = [];
...
</code></pre>
<h5 id="step-2-2"><a class="header" href="#step-2-2">Step 2:</a></h5>
<p>Add children to a list in your State class. Something like this:</p>
<pre><code class="language-dart">// Declare all the widgets you want to navigate on bottom bar item click
final List&lt;Widget&gt; _children = [
PlaceholderWidget(Colors.white),
PlaceholderWidget(Colors.green),
PlaceholderWidget(Colors.blue)
];
</code></pre>
<h5 id="step-3"><a class="header" href="#step-3">Step 3:</a></h5>
<p>Create a function that will update the value of _currentIndex in your State class.
It’d be called when user taps on a bottombar item. Something like this:</p>
<pre><code class="language-dart">void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
</code></pre>
<h5 id="step-4-1"><a class="header" href="#step-4-1">Step 4:</a></h5>
<p>Create a class called PlaceholderWidget.This widget will be displayed when Bottom bar is tapped.</p>
<pre><code class="language-dart">import 'package:flutter/material.dart';
class PlaceholderWidget extends StatelessWidget {
final Color color;
PlaceholderWidget(this.color);
@override
Widget build(BuildContext context) {
return Container(
color: color,
child: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: &lt;Widget&gt;[
new Text(
'Try me!',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 100.0,
fontFamily: 'Roboto',
),
),
...
],
),
),
);
}
}
</code></pre>
<h5 id="step-5"><a class="header" href="#step-5">Step 5:</a></h5>
<p>Create a class called PlaceholderWidget.This widget will be displayed when Bottom bar is tapped.</p>
<pre><code class="language-dart">@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Flutter App'),
),
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.blueAccent,
primaryColor: Colors.white30,
textTheme: Theme.of(context)
.textTheme
.copyWith(caption: new TextStyle(color: Colors.white))),
child: BottomNavigationBar(
currentIndex: _currentIndex, // Set the value of _currentIndex to currentIndex
onTap: onTabTapped, // Set the onTabTapped function we creatd earlier
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.playlist_add),
title: new Text("Playlist"),
),
BottomNavigationBarItem(
icon: new Icon(Icons.person), title: new Text("My Profile")),
BottomNavigationBarItem(
icon: new Icon(Icons.mail), title: new Text("Inbox"))
],
),
),
body:_children[_currentIndex] // Change Widget based on item selected
);
}
</code></pre>
<h5 id="yaaaaaaaassssss-we-just-did-it-take-a-look-at-the-result"><a class="header" href="#yaaaaaaaassssss-we-just-did-it-take-a-look-at-the-result">Yaaaaaaaassssss!!!! We just did it! Take a look at the result</a></h5>
<p><img src="../../img_list/bottom-tap-1.png" width="280"/> <img src="../../img_list/bottom-tap-2.png" width="280"/></p>
<h2 id="tabs"><a class="header" href="#tabs">Tabs</a></h2>
<p>Working with tabs is a common pattern in apps following the Material Design guidelines.
Flutter includes a convenient way to create tab layouts as part of the material library.
To quickly implement tabs in your next project, follow these 3 steps:</p>
<h3 id="step-1-3"><a class="header" href="#step-1-3">Step 1</a></h3>
<p>Create a TabController widget, which allows you to keep a selected tab and content sections in sync.</p>
<pre><code class="language-dart">return MaterialApp(
home: DefaultTabController(
length: 3, // The number of tabs / content sections we need to display
child:.. // See next step!
),
);
</code></pre>
<h3 id="step-2-3"><a class="header" href="#step-2-3">Step 2</a></h3>
<p>Now we can create 3 tabs for the TabController we initialized earlier using TabBar!</p>
<img src="../../img_list/tabs.gif" width="280"/>
<pre><code class="language-dart">return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.home)),
Tab(icon: Icon(Icons.people)),
Tab(icon: Icon(Icons.mail)),
],
),
title: Text('Flutter Tabs Example'), // You can declare a title for your tab
),
body: ... // See next step for this!
),
),
);
</code></pre>
<h3 id="step-3-1"><a class="header" href="#step-3-1">Step 3</a></h3>
<p>Now that we have tabs, we’ll want to display content when a tab is selected.
For this demo, we’ll employ the TabBarView Widget.</p>
<img src="../../img_list/tabs.gif" width="280"/>
<pre><code class="language-dart">return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.home)),
Tab(icon: Icon(Icons.people)),
Tab(icon: Icon(Icons.mail)),
],
),
title: Text('Flutter Tabs Example'),
),
body: TabBarView(
children: [
FirstPlaceHolder(), // Create a widget class called FirstPlaceHolder
SecondPlaceHolder(), // Create a widget class called SecondPlaceHolder
ThirdPlaceHolder() //// Create a widget class called ThirdPlaceHolder
],
),
),
),
);
</code></pre>
<h2 id="navigation-drawer"><a class="header" href="#navigation-drawer">Navigation Drawer</a></h2>
<p>There are situations whereby there won’t be insufficient space to support tabs. Drawers provide a handy alternative at this point.
In Flutter, we can use the Drawer Widget in combination with a Scaffold to create a layout with a Material Design Drawer.
<img src="src/img/flutter/screenshots/navigation-drawer.gif" width="280"/></p>
<p>The code snippet below shows you how to get this done quickly.</p>
<pre><code class="language-dart">import 'package:flutter/material.dart';
import 'package:oamp/app/screens/form_validation.dart';
import 'package:oamp/app/screens/place_holder.dart';
class FreeDemo extends StatefulWidget {
@override
State&lt;StatefulWidget&gt; createState() {
return new FreeDemoState();
}
}
class FreeDemoState extends State&lt;FreeDemo&gt;
with SingleTickerProviderStateMixin {
int _selectedIndex = 0;
final drawerItems = [
new DrawerItem("Home", Icons.home),
new DrawerItem("Menu", Icons.fastfood),
new DrawerItem("Favorites", Icons.favorite)
];
_getDrawerItemScreen(int pos) {
return new PlaceholderWidget(Colors.white);
}
_onSelectItem(int index) {
setState(() {
_selectedIndex = index;
_getDrawerItemScreen(_selectedIndex);
});
Navigator.of(context).pop(); // close the drawer
}
@override
Widget build(BuildContext context) {
List&lt;Widget&gt; drawerOptions =[];
for(var i=0; i&lt;drawerItems.length;i++){
var d=drawerItems[i];
drawerOptions.add(new ListTile(
leading: new Icon(d.icon),
title: new Text(
d.title,
style: new TextStyle(fontSize: 19.0, fontWeight: FontWeight.w400),
),
selected: i == _selectedIndex,
onTap: () =&gt;_onSelectItem(i),
));
}
return Scaffold(
appBar: AppBar(
title: Text('Navigation Drawer Example'),
),
drawer: new Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: &lt;Widget&gt;[
new UserAccountsDrawerHeader(
accountName: new Text(
"Temidayo Adefioye",
style: new TextStyle(
fontWeight: FontWeight.w500, fontSize: 18.0
),
),
accountEmail: Text(
"temidjoy@gmail.com",
style: new TextStyle(
fontSize: 18.0, fontWeight: FontWeight.w500
),
),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.white,
child: Text('TA'),
),),
new Column(children: drawerOptions,)
],
),
),
body: _getDrawerItemScreen(_selectedIndex),
);
}
}
class DrawerItem {
String title;
IconData icon;
DrawerItem(this.title, this.icon);
}
</code></pre>
<h2 id="form-validations"><a class="header" href="#form-validations">Form Validations</a></h2>
<p>Mobile developers often require users to enter information into a text field. For example, you might be working on an app that requires your users to log in with an email address and password combination. Let’s see how we can achieve this without necessarily importing a 3rd party library! Super cool right?
<img src="../../img_list/validation.gif" width="280"/></p>
<p>You want something like this on your App? Here is how you can achieve this in few lines!</p>
<pre><code class="language-dart">
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = 'Form Validation Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: Text(appTitle),
),
body: SingleChildScrollView(
child: ValidationDemo(),
)
),
);
}
}
class ValidationDemo extends StatefulWidget {
@override
State&lt;StatefulWidget&gt; createState() {
return new ValidationDemoState();
}
}
class ValidationDemoState extends State&lt;ValidationDemo&gt; {
// Note: This is a GlobalKey&lt;FormState&gt;, not a GlobalKey&lt;ValidationDemoState&gt;!
final _formKey = GlobalKey&lt;FormState&gt;();
// Declare a default bool variable isPasswordVisible and initialize to false.
// This is the default state of the password visibilty.
bool isPasswordVisible = false;
@override
Widget build(BuildContext context) {
return new Container(
margin: new EdgeInsets.all(15.0),
child: new Form(
key: _formKey, // Set the _formKey here
child: formUI(), // Set your custom widget here
),
);
}
// Build a custom widget for your app
Widget formUI() {
return new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: &lt;Widget&gt;[
new TextFormField(
decoration: const InputDecoration(labelText: 'Username'), // Create an optional decoration for your TextFormField
validator: _validateUsername,
),
new TextFormField(
decoration: const InputDecoration(labelText: 'Email'),
validator: _validateEmail,
keyboardType: TextInputType.emailAddress,
),
new TextFormField(
keyboardType: TextInputType.text,
validator: _validatePassword,
obscureText: isPasswordVisible, //This will obscure text dynamically
decoration: InputDecoration(
labelText: 'Password',
hintText: 'Enter your password',
// Here is key idea
suffixIcon: IconButton(
icon: Icon(
// Based on passwordVisible state choose the icon
isPasswordVisible ? Icons.visibility : Icons.visibility_off,
color: Theme.of(context).primaryColorDark,
),
onPressed: () {
// Update the state i.e. toogle the state of passwordVisible variable
setState(() {
isPasswordVisible
? isPasswordVisible = false
: isPasswordVisible = true;
});
},
),
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: RaisedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text('Processing data')));
}
},
child: Text('Submit'),
))
],
);
}
String _validateEmail(String value) {
if (value.isEmpty) {
return 'Email field cannot be empty!';
}
// Regex for email validation
String p = "[a-zA-Z0-9\+\.\_\%\-\+]{1,256}" +
"\\@" +
"[a-zA-Z0-9][a-zA-Z0-9\\-]{0,64}" +
"(" +
"\\." +
"[a-zA-Z0-9][a-zA-Z0-9\\-]{0,25}" +
")+";
RegExp regExp = new RegExp(p);
if (regExp.hasMatch(value)) {
return null;
}
return 'Email provided isn\'t valid.Try another email address';
}
_validatePassword(String value){
if(value.isEmpty){
return 'Password field cannot be empty';
}
if(value.length&lt;6){
return 'Password length must be greater than 6';
}
}
_validateUsername(String value){
if(value.isEmpty){
return 'Username cannot be empty';
}
if(value.length&lt;6){
return 'Username length must be greater than 6';
}
}
}
</code></pre>
</main>
<nav class="nav-wrapper" aria-label="Page navigation">
<!-- Mobile navigation buttons -->
<a rel="prev" href="../../posts/dart/dart.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
<a rel="next prefetch" href="../../posts/dart/dart_cheat_sheet.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
<div style="clear: both"></div>
</nav>
</div>
</div>
<nav class="nav-wide-wrapper" aria-label="Page navigation">
<a rel="prev" href="../../posts/dart/dart.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
<a rel="next prefetch" href="../../posts/dart/dart_cheat_sheet.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
</nav>
</div>
<script>
window.playground_line_numbers = true;
</script>
<script>
window.playground_copyable = true;
</script>
<script src="../../ace.js"></script>
<script src="../../editor.js"></script>
<script src="../../mode-rust.js"></script>
<script src="../../theme-dawn.js"></script>
<script src="../../theme-tomorrow_night.js"></script>
<script src="../../elasticlunr.min.js"></script>
<script src="../../mark.min.js"></script>
<script src="../../searcher.js"></script>
<script src="../../clipboard.min.js"></script>
<script src="../../highlight.js"></script>
<script src="../../book.js"></script>
<!-- Custom JS scripts -->
<script src="../../src/js/custom.js"></script>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink