Row & Column Widgets

<p>reset-3c756112--pageHeader-2d9fadfeoutline: none; box-sizing: inherit; margin: 0px 0px 32px; padding: 0px; border-bottom: 1px solid rgb(230, 236, 241); color: rgb(59, 69, 78); font-family: Roboto, sans-serif; font-size: 15px;](reset-3c756112--pageHeaderInner-7c0f0284outline: none; box-sizing: inherit; flex: 1 1 auto; margin: 0px; display: flex; padding: 40px 0px; flex-flow: row wrap; align-items: baseline; -webkit-box-align: baseline; -webkit-box-orient: horizontal; -webkit-box-direction: normal;](reset-3c756112--pageHeaderWrapperContent-6897c946outline: none; box-sizing: inherit; flex: 1 1 0%; margin: 0px; padding: 0px; position: relative;](reset-3c756112--pageHeaderDescription-22970244outline: none; box-sizing: inherit; flex: 1 1 auto; margin: 0px; padding: 0px;](pageDescription-fa3710acoutline: none; box-sizing: inherit; width: 750px; margin: 24px 0px 0px; border: none; resize: none; min-height: 19px; overflow-x: hidden; background: none; border-radius: 3px; letter-spacing: 0em;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; font-size: 16px; line-height: 1.625;](More detail about the row and column are in this tutorial.</p> <p>reset-3c756112--toaster-c029690eoutline: none; box-sizing: inherit; top: 16px; left: 951.5px; margin: 0px; padding: 0px; z-index: 160; position: fixed; transform: translateX(-50%); color: rgb(59, 69, 78); font-family: Roboto, sans-serif; font-size: 15px;](reset-3c756112--pageBody-ceb8ae94outline: none; box-sizing: inherit; margin: 0px; display: flex; padding: 0px; flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; color: rgb(59, 69, 78); font-family: Roboto, sans-serif;](blockParagraph-544a408cdata-key="1be07f621a48498d925de5ff834e2a47outline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="f82f1f5055ad41a58e1240ae7b658c83outline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="38cf5d8107e34f059f3183076280a02doutline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="33bd372e2df346aab12e637c3315fd5boutline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="90126f3ea7d04ce09f806f911715531coutline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](codeBlock-18b09018outline: none; box-sizing: inherit; position: relative; margin-bottom: 24px;](codeHeader-e3625762--codeHeaderFloating-7f73cde3contenteditable="falseoutline: none; box-sizing: inherit; top: 5px; right: 0px; display: flex; z-index: 1; position: absolute; font-size: 12px; background: transparent; line-height: 1.2; user-select: none;](codeBlock-18b09018outline: none; box-sizing: inherit; position: relative; margin-bottom: 24px;](codeHeader-e3625762--codeHeaderFloating-7f73cde3contenteditable="falseoutline: none; box-sizing: inherit; top: 5px; right: 0px; display: flex; z-index: 1; position: absolute; font-size: 12px; background: transparent; line-height: 1.2; user-select: none;](blockParagraph-544a408cdata-key="7b58c5a38ef64161a69f048c5bb0a9ffoutline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="b1f70ebba2214495b5b902c7d9e04ab9outline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="8a5a8c0111d0434b8985f5672cb01944outline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="fa9705127cf44e4ab5a0938419e114b1outline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="4b0a85ad4fce42a6a47ba637a672e17coutline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="d08e797f4a394fa98a526892adc72b4aoutline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="c242291b74fa418d80111f6ae1d24cdeoutline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="9137cb8c1e784da792051bd84b49b550outline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="9a935c1385db4b21adca65c31e85b150outline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="083173bd28684a25b77fc496e31d9afdoutline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="96bfeb0698b64349afc0a6f3522f497doutline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="3ca53f406a6a48b48a6f512393ba72afoutline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="3f193ceb1b3e4c5fa7c229e566c2bedcoutline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="ea03fb7b342344b3a47ddea995f8798coutline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="65e6b6bb27654933a8ff7206e17a89aeoutline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="dd29290c7a8246c092eec83c7ae6ca16outline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="80fd0750ab5e421781e8573d79625d65outline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="ad9310b3426f4b5ebbfd458b30a16648outline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](blockParagraph-544a408cdata-key="6bbf464a5e8345b2af47cd73a873f47eoutline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](<span data-key="9d493e859e9f4b41bc3b240069f4b689outline: none; box-sizing: inherit;](<span data-offset-key="9d493e859e9f4b41bc3b240069f4b689:0outline: none; box-sizing: inherit;](Then, our tutorial about the <span data-offset-key="9d493e859e9f4b41bc3b240069f4b689:1outline: none; box-sizing: inherit;](<code spellcheck="falsecode-81e98f88data-slate-leaf="trueoutline: none; box-sizing: inherit; margin: 0px 1px; display: inline-block; padding: 3px 6px; font-size: 13.6px; font-family: "Source Code Pro", Menlo, monospace; border-radius: 3px; background-color: rgb(245, 247, 249); -webkit-box-decoration-break: clone;](Row/Column<code><span data-offset-key="9d493e859e9f4b41bc3b240069f4b689:2outline: none; box-sizing: inherit;]( is done, we look at above, we will know that the main parameter is the <span data-offset-key="9d493e859e9f4b41bc3b240069f4b689:3outline: none; box-sizing: inherit;](<code spellcheck="falsecode-81e98f88data-slate-leaf="trueoutline: none; box-sizing: inherit; margin: 0px 1px; display: inline-block; padding: 3px 6px; font-size: 13.6px; font-family: "Source Code Pro", Menlo, monospace; border-radius: 3px; background-color: rgb(245, 247, 249); -webkit-box-decoration-break: clone;](mainAxisAlignment</code><span data-offset-key="9d493e859e9f4b41bc3b240069f4b689:4outline: none; box-sizing: inherit;](, <span data-offset-key="9d493e859e9f4b41bc3b240069f4b689:5outline: none; box-sizing: inherit;](<code spellcheck="falsecode-81e98f88data-slate-leaf="trueoutline: none; box-sizing: inherit; margin: 0px 1px; display: inline-block; padding: 3px 6px; font-size: 13.6px; font-family: "Source Code Pro", Menlo, monospace; border-radius: 3px; background-color: rgb(245, 247, 249); -webkit-box-decoration-break: clone;](crossAxisAlignment`<span data-offset-key="9d493e859e9f4b41bc3b240069f4b689:6outline: none; box-sizing: inherit;](, if you understand them, the other will be easy to use. Hope you have some gain from this article.</p> <p>blockParagraph-544a408cdata-key="86cb18537a7148658a1cab4ff90afbbfoutline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](<span data-key="0b99b0d44e434dbaae976d056704722aoutline: none; box-sizing: inherit;](<span data-offset-key="0b99b0d44e434dbaae976d056704722a:0outline: none; box-sizing: inherit;](Thanks for your reading!</p> <p>blockParagraph-544a408cdata-key="cb2b80e7384846ef81d4257339105e48outline: none; box-sizing: inherit; color: inherit; margin-right: 0px; margin-bottom: 24px; margin-left: 0px; position: relative;](text-4505230f--TextH400-3033861foutline: none; box-sizing: inherit; line-height: 1.625;](<span data-key="ec22df5bb1f3449c876a91474abc480boutline: none; box-sizing: inherit;](<span data-offset-key="ec22df5bb1f3449c876a91474abc480b:0outline: none; box-sizing: inherit;](The end.</p> <p><h3 id="whole-code-in-github-star-to-supportblockHeading-442b4f12--blockHeading3WithMargin-532d7700data-key="2eb1075f19854a9a92fd3ed940b548b8outline: none; box-sizing: inherit; color: rgb(36, 42, 49); margin: 24px 0px; display: flex; position: relative;](blockHeadingContent-756c9114outline: none; box-sizing: inherit; flex: 1 1 0%;](text-4505230f--HeadingH400-686c0942outline: none; box-sizing: inherit; font-size: 16px; line-height: 1.5; font-weight: 700;](<span data-key="42c301973db54fb7a7b36a322f5b15daoutline: none; box-sizing: inherit;](<span data-offset-key="42c301973db54fb7a7b36a322f5b15da:0outline: none; box-sizing: inherit;](Whole code in <a class="link-a079aa82--primary-53a25e66--link-faf6c434href="https://github.com/FlutterOpen/flutter-widgets-examplestarget="_blankrel="noopener noreferrerdata-key="59fe293d422a4b37b82eaaa9c2d2caa6outline: none; box-sizing: inherit; color: rgb(84, 196, 252); cursor: pointer;](<span data-key="c4b1d0f8354446cbbea77d064fc03c9coutline: none; box-sizing: inherit;](<span data-offset-key="c4b1d0f8354446cbbea77d064fc03c9c:0outline: none; box-sizing: inherit;](GitHub)<span data-key="5956db544fb84731a4fdd8102ea02949outline: none; box-sizing: inherit;](<span data-offset-key="5956db544fb84731a4fdd8102ea02949:0outline: none; box-sizing: inherit;](,star to support.</p>