GitHub Copilot & Copilot Chat in Flutter

Generate widgets easily and fast

Mobile@Exxeta
3 min readFeb 9, 2024
Photo by Kevin Ku from Pexels

Artificial intelligence has established itself as a powerful tool for developers and is now also demonstrating its capabilities in Flutter. Specifically, there has been a growing interest in automatic code generation.

For this reason, we will explain how GitHub Copilot can be integrated with Visual Studio Code. This is especially interesting because of Dart’s automatic widget generation and the ability to directly get answers to your questions in the Copilot Chat.

How to start?

To use GitHub Copilot and Copilot Chat, you only need to add the following extensions in Visual Studio Code and link them to your GitHub account. After that, the fun can start! :)

Copilot: Widget Generation

We tested Copilot for you and generated a small text in red. As shown in the following gif, only a small comment line needs to be written:

Generated Code Snippet:


// Create a Text-Widget with a Text "Hello from Copilot" in red color
child: Text(
'Hello from Copilot',
style: TextStyle(
color: Colors.red,
),
),

Result:

Copilot: Chat Integration

In addition to being an intelligent code generator, Copilot is a chat partner that lets developers ask questions and get access to the most recently used files as reference. Asking Copilot for explanations adds a whole new level of learning to the process of programming. Developers can now ask questions, clarify uncertainties and understand complex concepts directly in the code editor by chatting with Copilot. This is not only an efficient way to expand knowledge, but also a springboard for productive work.

We posed the following question to Copilot to show you an example:

“Hello Copilot, can you explain how I can add a Text widget that will show the text “Hello from Copilot!” with a red color in the center widget in my file?”

Copilot answered our question with the following:

Summary

Copilot and Copilot Chat are powerful tools that revolutionize the developer’s everyday life. Both tools offer Flutter developers not only the opportunity to create efficient code but also serve as an interactive tutor. This can promote a faster understanding of complex topics and enable a seamless integration of learning processes into the workflow. Do you use Copilot? (by Tobias Rump)

--

--

Mobile@Exxeta

Passionate people @ Exxeta. Various topics around building great solutions for mobile devices. We enjoy: creating | sharing | exchanging. mobile@exxeta.com