The Flutter implements code prompting

1. Introduction

When I enter the keyword String, if I enter Stri, the editor will find all the code keywords that contain Stri. In this case, I just select the keyword that I want to enter, and it will add the rest of the words for me. So that’s the code hint, how do you do that in Flutter?

2.RawAutocomplete

The Flutter provides us with this Widget, which in its name is a Widget that automatically fills code. Let’s take a look at its parameters

3. Example code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark(),
      home: MyHomePage(title: 'Flutter Demo Home Page')); }}class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  List<String> options = [
    'int'.'double'.'String'.'num'.'void'.'extends'.'class'.'Widget'.'StatefulWidget'.'StatelessWidget'.'abstract'.'BuildContext',];void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: RawAutocomplete<String>(
        onSelected: (s) {
          print('$s');
        },
        optionsViewBuilder: (
          BuildContext context,
          AutocompleteOnSelected<String> onSelected,
          可迭代<String> options,
        ) {
          return Align(
            alignment: Alignment.topLeft,
            child: Material(
              elevation: 0.0,
              child: Container(
                color: Theme.of(context).cardColor,
                constraints: BoxConstraints(maxHeight: 360),
                child: ListView.builder(
                  itemBuilder: (BuildContext context, int index) {
                    String text = options.elementAt(index);
                    return ListTile(
                      onTap: () {
                        onSelected.call(text);
                      },
                      title: Text(text),
                    );
                  },
                  itemCount: options.length,
                ),
              ),
            ),
          );
        },
        optionsBuilder: (TextEditingValue textEditingValue) {
          if (textEditingValue.text.isEmpty) return [];
          String text = textEditingValue.text;
          if (text.contains(' ')) {
            text = text.split(' ').last;
          }
          return options
              .where((element) => RegExp('(. *)$text(. *) ', caseSensitive: false)
                  .hasMatch(element))
              .toList();
        },
        fieldViewBuilder: (BuildContext context,
            TextEditingController textEditingController,
            FocusNode focusNode,
            VoidCallback onFieldSubmitted) {
          return TextFormField(
            controller: textEditingController,
            focusNode: focusNode,
            onFieldSubmitted: (Stringvalue) { onFieldSubmitted(); }); }, ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip:'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.); }}Copy the code

4. The results are as follows

5. More

More about my plugin

• r_routerRoute jump can realize route interception, route registration, no Context jump, pop-up dialog box
• r_loggerThe maximum number of words output by the console was exceeded. Procedure
• r_upgradeApp upgrade, Android can realize notification bar download progress, hot update, incremental update, jump to the App Store, jump to the web page function, IOS to achieve jump to the App Store, jump to the web page function
• r_scanQr code/barcode scan code, can customize scan code window
• r_calendarCan be fully customized calendar plug-in, support multiple selection, continuous selection, single selection, switching synchronization, week/month view switching and other functions
• r_dotted_line_borderCan be simple to achieve dashed border, directly inContaineruse
• r_albumSimple syncing photos to Android/IOS albums
• fluctGenerate resource file references through the command line, etc

This article was first published at rhyme95.cn/archives/61…