Flutter2 Widgets - Link | RawAutoComplete | CupertinoFormSection
Tags: flutter, computerscience, productivity, programming
Published: 2021-03-07 11:44:17

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

<!-- wp:paragraph -->
<p><strong><em>Website: </em></strong><a href="https://web.flatteredwithflutter.com/#/" rel="noreferrer noopener" target="_blank"><strong><em>https://web.flatteredwithflutter.com/#/</em></strong></a></p>
<!-- /wp:paragraph -->


<!-- wp:paragraph -->
<p>We will cover briefly about</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li><a rel="noreferrer noopener" href="https://pub.dev/documentation/url_launcher/latest/link/Link-class.html" target="_blank">Link</a></li><li><a rel="noreferrer noopener" href="https://api.flutter.dev/flutter/cupertino/CupertinoSearchTextField-class.html" target="_blank">CupertinoSearchTextField</a></li><li><a rel="noreferrer noopener" href="https://api.flutter.dev/flutter/cupertino/CupertinoFormSection-class.html" target="_blank">CupertinoFormSection</a></li><li><a rel="noreferrer noopener" href="https://api.flutter.dev/flutter/cupertino/CupertinoFormRow-class.html" target="_blank">CupertinoFormRow</a></li><li><a rel="noreferrer noopener" href="https://api.flutter.dev/flutter/cupertino/CupertinoTextFormFieldRow-class.html" target="_blank">CupertinoTextFormFieldRow</a></li><li><a rel="noreferrer noopener" href="https://api.flutter.dev/flutter/material/ScaffoldMessenger-class.html" target="_blank">ScaffoldMessenger</a></li><li><a rel="noreferrer noopener" href="https://api.flutter.dev/flutter/widgets/RawAutocomplete-class.html" target="_blank">RawAutoComplete</a></li></ol>
<!-- /wp:list -->

{% youtube xzotjn1xaBY %}

<!-- wp:heading {"level":4} -->
<h4>Link</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As quoted by Flutter’s Product Manager Chris Sells</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Flutter has built a foundation for building richly interactive web applications. We primarily focused on performance and improvements to our rendering fidelity.&nbsp;</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>One of such web-specific features is the <a rel="noreferrer noopener" href="https://pub.dev/documentation/url_launcher/latest/link/Link-class.html" target="_blank">Link widget</a></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>Link(
   uri: Uri.parse('https://flatteredwithflutter.com'),
   builder: (_, followLink) {
     return ElevatedButton(
        onPressed: followLink,
        child: Text('Click me!!'),
     );
   },
);</code></pre>
<!-- /wp:code -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Note: This widget is present inside the <a href="https://pub.dev/packages/url_launcher" rel="noreferrer noopener" target="_blank"><strong>url_launcher package</strong></a></p></blockquote>
<!-- /wp:quote -->

<!-- wp:heading {"level":4} -->
<h4>CupertinoSearchTextField</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Few iOS widgets have been added to the Cupertino design language implementation.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>One of them is <a href="https://api.flutter.dev/flutter/cupertino/CupertinoSearchTextField-class.html" rel="noreferrer noopener" target="_blank">CupertinoSearchTextField</a></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/0*MjafpuLpxfBk3bb-" alt="Flutter2 Widgets - Link | RawAutoComplete | CupertinoFormSection"/><figcaption>Flutter2 Widgets - Link | RawAutoComplete | CupertinoFormSection</figcaption></figure>
<!-- /wp:image -->

<!-- wp:code -->
<pre class="wp-block-code"><code>CupertinoSearchTextField(
  onChanged: (value) {
    print('Search text: ' + value);
  },
  onSubmitted: (value) {
    print('Search Submitted text: ' + value);
  },
  suffixIcon: const Icon(Icons.search),
);</code></pre>
<!-- /wp:code -->

<!-- wp:list -->
<ul><li>When the user begins typing, onChanged gets invoked</li><li>When the user presses the done button (keyboard), onSubmitted gets invoked.</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":4} -->
<h4>CupertinoFormSection and CupertinoFormRow</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>An iOS-style form section.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As per the docs:</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>The base constructor for <a href="https://api.flutter.dev/flutter/cupertino/CupertinoFormSection-class.html" rel="noreferrer noopener" target="_blank">CupertinoFormSection</a> constructs an edge-to-edge style section which includes an iOS-style header, rows, the dividers between rows, and borders on top and bottom of the rows.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/1*1gY9FeeB5pJ6KyPm33d1ZQ.png" alt="Flutter2 Widgets - Link | RawAutoComplete | CupertinoFormSection"/><figcaption>Flutter2 Widgets - Link | RawAutoComplete | CupertinoFormSection</figcaption></figure>
<!-- /wp:image -->

<!-- wp:code -->
<pre class="wp-block-code"><code>CupertinoFormSection(
   header: Text('CupertinoFormRow'),
   children: &lt;Widget>[
      CupertinoFormRow(
         child: CupertinoSwitch(
            value: toggleValue,
            onChanged: (value) {
              setState(() => toggleValue = value); 
            ),
            prefix: Text('Toggle'),
            helper: Text('Slide me'),
            error: toggleValue ? null : Text('Not slided'),
      ),
   ],
),</code></pre>
<!-- /wp:code -->

<!-- wp:list -->
<ul><li>Initialize the CupertinoFormSection which has a <strong>required children</strong> parameter</li><li>The form has a header and footer property.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>CupertinoFormRow</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Creates an iOS-style split form row with a standard prefix and child widget.&nbsp;</li><li>It gives space for error and helper widgets that appear under the form.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>CupertinoTextFormFieldRow</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As per the documentation</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Creates a <a href="https://api.flutter.dev/flutter/cupertino/CupertinoFormRow-class.html" rel="noreferrer noopener" target="_blank">CupertinoFormRow</a> containing a <a href="https://api.flutter.dev/flutter/widgets/FormField-class.html" rel="noreferrer noopener" target="_blank">FormField</a> that wraps a <a href="https://api.flutter.dev/flutter/cupertino/CupertinoTextField-class.html" rel="noreferrer noopener" target="_blank">CupertinoTextField</a>.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:code -->
<pre class="wp-block-code"><code>CupertinoFormSection(
   header: Text('CupertinoTextFormFieldRow '),
   children: &lt;Widget>[
     CupertinoTextFormFieldRow(
       controller: _textController,
       onChanged: (value) {
          print('TextFormField text: ' + value);
       },
       onFieldSubmitted: (value) {
          print('TextFormField Submitted text: ' + value);
       },
     ),
   ],
),</code></pre>
<!-- /wp:code -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:list -->
<ul><li>We pass in an instance of TextEditingController.</li><li>When the user begins typing, onChanged gets invoked</li><li>When the user presses the done button (keyboard), onFieldSubmitted gets invoked.</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>ScaffoldMessenger</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is used to manage <a href="https://api.flutter.dev/flutter/material/SnackBar-class.html" rel="noreferrer noopener" target="_blank">SnackBar</a>s for descendant <a href="https://api.flutter.dev/flutter/material/Scaffold-class.html" rel="noreferrer noopener" target="_blank">Scaffold</a>s. This class provides APIs for showing snack bars.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Reason for creating ScaffoldMessenger:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>T<a rel="noreferrer noopener" href="https://github.com/flutter/flutter/pull/64101" target="_blank">he ScaffoldMessenger</a> was created to deal with a number of SnackBar-related issues,&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>the ability to easily create a SnackBar in response to an AppBar action,&nbsp;</li><li>creating SnackBars to persist between Scaffold transitions,&nbsp;</li><li>being able to show SnackBars at the completion of an asynchronous action, even if the user has navigated to a page with a different Scaffold.</li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://cdn-images-1.medium.com/max/1600/1*wZx2bZhJp8JtUMBTQDnc4A.png" alt=""/><figcaption>Flutter2 Widgets - Link | RawAutoComplete | CupertinoFormSection</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">FloatingActionButton(
  child: const Icon(Icons.add_alert),
  onPressed: () {
    final messenger = ScaffoldMessenger.of(context);

    messenger.showSnackBar(
      SnackBar(content: Text('Hey Snackbar!')),
    );
  },
);</pre>
<!-- /wp:preformatted -->

<!-- wp:list -->
<ul><li>We obtain the <a rel="noreferrer noopener" href="https://api.flutter.dev/flutter/material/ScaffoldMessengerState-class.html" target="_blank">ScaffoldMessengerState</a> for the current <a rel="noreferrer noopener" href="https://api.flutter.dev/flutter/widgets/BuildContext-class.html" target="_blank">BuildContext</a> via <a rel="noreferrer noopener" href="https://api.flutter.dev/flutter/material/ScaffoldMessenger/of.html" target="_blank">ScaffoldMessenger.of</a>.</li></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li>For showing the snackbar, we use the <a href="https://api.flutter.dev/flutter/material/ScaffoldMessengerState/showSnackBar.html" rel="noreferrer noopener" target="_blank">ScaffoldMessengerState.showSnackBar</a> function.</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>RawAutocomplete</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A widget for helping the user make a selection by entering some text and choosing from among a list of options.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://cdn-images-1.medium.com/max/1600/0*g1fmqh56rQUL3vrs" alt="RawAutocomplete"/><figcaption>RawAutocomplete</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:code -->
<pre class="wp-block-code"><code>// RawAutocomplete&lt;T>
RawAutocomplete&lt;String>(
   optionsBuilder: (TextEditingValue textEditingValue) {
      // YOUR LOGIC
   },
   onSelected: (String selection) {
     // YOUR LOGIC 
   },
   fieldViewBuilder: (_,
        TextEditingController textEditingController,
        FocusNode focusNode,
        VoidCallback onFieldSubmitted) {
     // YOUR LOGIC
   },
   optionsViewBuilder: (_,
         AutocompleteOnSelected&lt;String> onSelected,
         Iterable&lt;String> options) {
     // YOUR LOGIC  
   ),
)</code></pre>
<!-- /wp:code -->

<!-- wp:list -->
<ul><li>The type parameter T represents the type of the options. In our case, this is a String.</li><li>The user’s text input is received in a field built with the <a href="https://api.flutter.dev/flutter/widgets/RawAutocomplete/fieldViewBuilder.html" rel="noreferrer noopener" target="_blank">fieldViewBuilder</a> parameter.&nbsp;</li><li>The options to be displayed are determined using <a href="https://api.flutter.dev/flutter/widgets/RawAutocomplete/optionsBuilder.html" rel="noreferrer noopener" target="_blank">optionsBuilder</a></li><li>Finally, the options are shown using <a href="https://api.flutter.dev/flutter/widgets/RawAutocomplete/optionsViewBuilder.html" rel="noreferrer noopener" target="_blank">optionsViewBuilder</a>.</li></ul>
<!-- /wp:list -->


{% youtube xzotjn1xaBY %}


<!-- wp:paragraph -->
<p><strong><em>Website: </em></strong><a href="https://web.flatteredwithflutter.com/#/" rel="noreferrer noopener" target="_blank"><strong><em>https://web.flatteredwithflutter.com/#/</em></strong></a></p>
<!-- /wp:paragraph -->

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

<!-- wp:paragraph -->
<p><a rel="noreferrer noopener" href="https://github.com/AseemWangoo/flutter_programs/blob/master/flutter_2.zip" target="_blank"><em>Source code.</em></a>or <a rel="noreferrer noopener" href="https://gist.github.com/AseemWangoo/d9e6317d9d3e5a010fafaff5a9871f94" target="_blank"><em>Gist</em></a></p>
<!-- /wp:paragraph -->