Tworzenie generatora kodów AI Flutter za pomocą Gemini

Możesz stworzyć asystenta kodowania do generowania interfejsów Flutter lub jest komponent kodu, który chcesz szybko iterować. Tworzenie interfejsów użytkownika i satysfakcjonujące, ale też ciężka praca. Nie chodzi tylko o pozyskanie poprawnym kodem; poprawianie wyglądu i stylu oraz aby uzgodnić kierunek projektowania.

W tym samouczku pokazujemy, Agent motywu Flutter, narzędzie do obsługi kodu oparte na AI stworzone przez zespół Flutter Developer Relations w Google. Ten projekt open source jest rozszerzeniem Microsoft Visual Studio Kod (VS Code), który generuje określone komponentów motywu Flutter lub obiektu ThemeData, w tym schematy kolorów, style tekstu i style przycisków. Możesz zmodyfikować projekt, aby istniejące funkcje działają lepiej lub tworzyć nowe polecenia, w procesie programowania.

Filmowe omówienie projektu i sposobów jego rozszerzenia, w tym statystyki od twórców gry, Generator AI Flutter Code Generator – Build with Google AI (Tworzenie kodu z wykorzystaniem AI od Google). W przeciwnym razie możesz rozpocząć przedłużanie projektu, postępując zgodnie z instrukcjami. poniżej.

Zrzut ekranu przedstawiający agenta motywu Flutter działającego w VS Code

Rysunek 1. Agent motywu Flutter działający w hoście tworzenia rozszerzenia kodu w VS okno.

Konfigurowanie projektu

Te instrukcje przeprowadzą Cię przez proces przygotowywania projektu agenta motywu Flutter. do programowania i testów. Ogólne czynności to instalowanie niektórych oprogramowanie wstępne, ustawienie kilku zmiennych środowiskowych, sklonowanie projektu z repozytorium kodu i uruchomienie instalacji konfiguracji.

Zainstaluj wymagania wstępne

Projekt agenta motywu Flutter jest uruchamiany jako rozszerzenie platformy Microsoft Visual Studio Code (VS Code) i zastosowania Node.js i npm do zarządzania pakietami i uruchamiania aplikacji. Poniższe instrukcje instalacji dotyczą hosta z systemem Linux na komputerze.

Aby zainstalować wymagane oprogramowanie:

  1. Instalowanie kodu Visual Studio dla Twojej platformy.
  2. Zainstaluj node i npm po instalacji aplikacji odpowiednią dla Twojej platformy.
  3. Jeśli nie masz jeszcze zainstalowanego narzędzia Flutter for VS Code, wykonaj instrukcje instalacji.

Klonowanie i konfigurowanie projektu

Pobierz kod projektu i użyj polecenia instalacyjnego npm, aby go pobrać określić wymagane zależności i skonfigurować projekt. Potrzebujesz oprogramowanie sterujące źródłem git do pobierania projektu. kodu źródłowego.
Aby pobrać i skonfigurować kod projektu:

  1. Sklonuj repozytorium git za pomocą tego polecenia.

    git clone https://github.com/google/generative-ai-docs`

  2. Opcjonalnie możesz skonfigurować lokalne repozytorium Git tak, aby używało rozproszonego procesu płatności, więc masz tylko pliki związane z projektem Agent Dokumentów.

    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent

  3. Przejdź do katalogu głównego projektu agenta motywu Flutter.

    cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/

  4. Uruchom polecenie instalacji, aby pobrać zależności i skonfigurować projekt:

    npm install

Konfigurowanie i testowanie rozszerzenia

Teraz możesz przetestować instalację, uruchamiając agenta motywu Flutter jako rozszerzenie programistyczne w aplikacji VS Code na urządzeniu. Test otwiera osobny Okno Host opracowywania rozszerzenia VS Code, w którym i dostępności informacji. W tym nowym oknie skonfigurujesz klucz interfejsu API używany przez rozszerzenie do uzyskać dostęp do interfejsu Google Gemini API.

Aby skonfigurować i przetestować konfigurację:

  1. Uruchom aplikację VS Code.
  2. W VS Code utwórz nowe okno, wybierając File > (Plik >) Nowe okno.
  3. Otwórz projekt agenta motywu Flutter, wybierając Plik > Otwórz folder, i wybierając folder flutter_theme_agent/.
  4. W VS Code otwórz plik flutter_theme_agent/package.json.
  5. Uruchom rozszerzenie w trybie debugowania, wybierając Uruchom > Rozpocznij debugowanie. Ten krok otwiera osobne okno Host tworzenia rozszerzeń VS Code.
  6. Otwórz ustawienia VS Code, wybierając Kod > Ustawienia > Ustawienia.
  7. Zdobądź Klucz interfejsu API Gemini od Google z witryny dla deweloperów generatywnej AI i skopiuj ciąg znaków.

  8. Ustaw klucz interfejsu API jako ustawienie konfiguracji. W Ustawieniach wyszukiwania wpisz flutter theme, wybierz kartę Użytkownik i w polu Google > Gemini: Klucz interfejsu API, kliknij link Edytuj w pliku settings.json oraz dodaj swój klucz interfejsu Gemini API:

    "google.ai.apiKey": "your-api-key-here"

  9. Zapisz zmiany w pliku settings.json i zamknij karty ustawień.

Aby przetestować polecenia rozszerzenia:

  1. W oknie Extension Development Host (Host tworzenia rozszerzeń) VS Code wpisz kod komentarz opisujący komponent interfejsu, który chcesz wygenerować.
  2. Zaznacz tekst komentarza z właściwościami komponentu.
  3. Otwórz paletę poleceń, wybierając Widok > Paleta poleceń.
  4. Na palecie poleceń wpisz Flutter Theme i wybierz jedną z opcji z takim prefiksem.

Zmodyfikuj istniejące polecenie

Zmodyfikowanie poleceń dostępnych w agencie motywu Flutter to najprostszy sposób zmienić działanie i funkcje rozszerzenia.

Zarówno w przypadku komentarzy, jak i opinii, polecenie „ujęć” przykłady kodu i komentarze do tego kodu, a także ogólne instrukcji dotyczących modelu językowego AI. Przewodniki po informacjach kontekstowych dotyczących tego promptu model językowy Gemini do generowania odpowiedzi. Zmieniając prompt instrukcji, przykładów lub obu tych poleceniach w poleceniu dotyczącym komentarza lub opinii, możesz zmienić działanie każdego z istniejących poleceń.

Z tego zestawu instrukcji dowiesz się, jak zmodyfikować polecenie buttonstyle.ts przez: zmianę tekstu wiersza polecenia.

Aby przygotować się do edytowania polecenia buttonstyle.ts:\

  1. Uruchom aplikację VS Code.
  2. W VS Code utwórz nowe okno, wybierając File > (Plik >) Nowe okno.
  3. Otwórz projekt agenta motywu Flutter, wybierając Plik > Otwórz folder, i wybierając folder flutter_theme_agent/.

  4. Otwórz plik flutter_theme_agent/src/buttonstyle.ts.

    Aby zmodyfikować działanie polecenia buttonstyle.ts:\

  5. W pliku buttonstyle.ts zmień stałą BUTTONSTYLE_CONTEXT , aby uwzględnić różne instrukcje.

    const BUTTONSTYLE_CONTEXT=`
ButtonStyle should only define properties that exist for a ButtonStyle
object. ButtonStyle objects have the following properties. The buttons
can ONLY be styled by setting these properties. No other properties:
alignment → AlignmentGeometry? // The alignment of the button's child.
...

  6. Opcjonalnie w pliku buttonstyle.ts BUTTONSTYLE_CONTEXT stałe, dodać kolejny przykład instrukcji i danych wyjściowych stylu przycisku lub zastępując jeden z dotychczasowych przykładów.

    ...
Here's an example prompt:
Create a ButtonStyle where the button is green by default and blue on hover state. And elevation is 14, no surface tint color, and the splash effect is turned off.
Here's an example of good Dart code:
ButtonStyle(
  backgroundColor: MaterialStateProperty.resolveWith<Color?>(
...

  7. Zapisz zmiany w pliku buttonstyle.ts.

Aby przetestować zmodyfikowane polecenie:

  1. W oknie projektu rozszerzenia VS Code ponownie uruchom debugera do wybierając Uruchom > Ponownie uruchom debugowanie.

  2. W oknie Extension Development Host (Host tworzenia rozszerzeń) VS Code wybierz kod. i dodaj opis wybranego stylu przycisku – na przykład przykład:

    // blue, lickable buttons that light up when you hover over them`

  3. Otwórz paletę poleceń, wybierając Widok > Paleta poleceń.

  4. Na palecie poleceń wpisz Flutter i wybierz motyw Flutter Agent: utwórz polecenie Flutter ButtonStyle.

Utwórz nowe polecenie

Agent motywu Flutter można rozszerzyć, tworząc nowe polecenia wykonujące zupełnie nowych zadań przy użyciu interfejsu Gemini API. Każdy plik poleceń, taki jak buttonstyle.ts i colorscheme.ts są w większości niezależne i obejmują do zbierania tekstu z aktywnego edytora, do tworzenia promptu, łączenia do interfejsu Gemini API, wysyłając prompt i przekazując odpowiedź.

Zrzut ekranu agenta motywu Flutter z widocznym nowym poleceniem

Rysunek 2. Nowe polecenie agenta motywu Flutter w rozszerzeniu kodu VS Okno hosta programowania.

Ten zestaw instrukcji wyjaśnia, jak utworzyć nowe polecenie przy użyciu kodu z istniejącego polecenia colorscheme.ts, jako szablonu. Ta aktualizacja zmieni aby nie uwzględniać składni obiektu ColorScheme, tak by nie musisz usuwać tej składni po wygenerowaniu i wizualizować dane wyjściowe szybciej.

Aby utworzyć polecenie generujące tylko listę kolorów dla kolumny ColorScheme obiekt:

  1. Utwórz kopię pliku flutter_theme_agent/src/colorscheme.ts o nazwie colorscheme2.ts w katalogu src/.
  2. W VS Code otwórz plik src/colorscheme2.ts.

  3. W pliku colorscheme2.ts zmień nazwę funkcji generateColorScheme na generateColorScheme2:

    export async function generateColorScheme2(){
  vscode.window.showInformationMessage('Generating Color Scheme...');

  4. Zmień instrukcje dotyczące promptów w pliku colorscheme2.ts. Edytuj COLORSCHEME_CONTEXT instrukcji generowania kodu przez usunięcie ColorScheme( z przykładowego kodu w wierszu 51 i ustaw go jako pusty wiersz.

    ...
Here's the example of good Dart code:

  brightness: Brightness.light,
  primary: Color(0xffFF80AB),
...

  5. Usuń zamykający znak nawiasu „)” od końca z listą kolorów i ustawić ją jako pustą linię.

    ...
  inversePrimary: Color(0xffD15B9D),
  surfaceTint: Color(0xffFF80AB),

This example code is a good ...

  6. Powtórz te zmiany dla drugiego przykładu. W COLORSCHEME_CONTEXT w wierszu 87, usuń tekst ColorScheme( i pozostaw to pole puste.

  7. W wierszu 115 usuń nawias zamykający „)” z na końcu listy kolorów i ustaw go na pusty wiersz.

  8. W ciągu znaków COLORSCHEME_CONTEXT dodaj instrukcję, która nie ma zawierać składni zamykającej:

    ...
- The color scheme must be accessible and high-contrast.

In the response, only include the list of colors and nothing else. Do
not include a starting "ColorScheme(" prefix or an ending ")" suffix.

Here's an example user prompt:
...

  9. Zapisz zmiany w pliku colorscheme2.ts.

Integracja nowego polecenia

Po zakończeniu kodu nowego polecenia musisz zintegrować je z reszty rozszerzenia. Zaktualizuj pliki extension.ts i package.json do ustaw nowe polecenie jako część rozszerzenia i włącz funkcję VS Code nowego polecenia.

Aby zintegrować nowe polecenie z kodem rozszerzenia:

  1. W VS Code otwórz plik flutter_theme_agent/src/extension.ts.

  2. Zaimportuj nowy kod polecenia do rozszerzenia, dodając nowy import .

    import { generateColorScheme2 } from './components/colorscheme2';

  3. Zarejestruj nowe polecenie, dodając ten kod do pola activate().

    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('flutter-theme-agent.generateColorScheme2',
        generateColorScheme2);
    ...
}

  4. Zapisz zmiany w pliku extension.ts.

Aby zintegrować polecenie „name” z pakietem rozszerzeń:

  1. W VS Code otwórz plik flutter_theme_agent/package.json.

  2. Dodaj nowe polecenie do sekcji commands pliku pakietu.

    "contributes": {
  "commands": [
    ...
    {
      "command": "flutter-theme-agent.generateColorScheme2",
      "title": "Flutter Theme Agent: My New Code Generator."
    }
  ],

  3. Zapisz zmiany w pliku package.json.

Przetestuj nowe polecenie

Po zakończeniu kodowania polecenia i zintegrowaniu go z narzędziem możesz je przetestować. Nowe polecenie jest dostępne tylko w kodzie VS Extension Development Host (Host tworzenia rozszerzeń), a nie w oknie VS Code, edytował(a) kod rozszerzenia.

Aby przetestować zmodyfikowane polecenie:

  1. W oknie projektu rozszerzenia VS Code ponownie uruchom debugera do wybierając Uruchom > Ponownie uruchom debugowanie, co spowoduje uruchomienie osobnego Okno Extension Development Host (Host tworzenia rozszerzeń).
  2. W oknie Host Development Development Host VS Code otwórz plik Flutter. w projektach programistycznych.
  3. W tym samym oknie otwórz okno edytora kodu, wpisz komentarz opisujący wybrany komponent interfejsu i zaznacz tekst komentarza.
  4. Otwórz paletę poleceń, wybierając Widok > Paleta poleceń.
  5. Na palecie poleceń wpisz Flutter Theme i wybierz Agent motywu Flutter: My New Code Generator.

Dodatkowe materiały

Więcej informacji o projekcie Agent motywu Flutter znajdziesz w repozytorium kodu. Jeśli potrzebujesz pomocy przy tworzeniu aplikacji lub szukasz programisty współpracowników, zapoznaj się z Serwer Discord społeczności Google Developers.

Aplikacje produkcyjne

Jeśli planujesz wdrożyć agenta motywu Flutter dla dużej grupy odbiorców, pamiętaj, że wykorzystanie interfejsu API Google Gemini może podlegać ograniczeniom liczby żądań, ograniczeniach korzystania. Jeśli rozważasz stworzenie aplikacji produkcyjnej za pomocą modelu Gemini, zapłacić Vertex AI Google Cloud usług zwiększających skalowalność i niezawodność aplikacji.