What is Google Antigravity?

Google Antigravity is an AI-powered IDE featuring Gemini 3 with a 1 million token context window, Agent Mode for autonomous task execution, and MCP server integration for connecting to external tools and databases.

How much does Google Antigravity cost?

Google Antigravity offers a free tier with basic AI features and limited requests. Pro plans start at $20/month for unlimited AI and Agent Mode access.

Tutorials

Google Antigravity for Mobile Development: Flutter & React Native with Gemini 3

Nick

December 19, 2025

👁️ 38 views

Google Antigravity for Mobile Development: Flutter & React Native with Gemini 3

Mobile development in Google Antigravity brings AI-powered assistance to cross-platform app building. Whether you're using Flutter or React Native, Gemini 3 can generate components, handle platform-specific code, and accelerate your workflow.

Setting Up Mobile Development

Flutter Setup

Install Flutter extension:

Dart-Code.flutter
Dart-Code.dart-code

Configure Antigravity for Flutter:

// .antigravity/settings.json
{
  "dart.flutterSdkPath": "/path/to/flutter",
  "dart.lineLength": 80,
  "[dart]": {
    "editor.formatOnSave": true,
    "editor.selectionHighlight": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": "off"
  }
}

React Native Setup

Install extensions:

msjsdiag.vscode-react-native
dsznajder.es7-react-js-snippets

Configure for React Native:

{
  "react-native.packager.port": 8081,
  "react-native-tools.showUserTips": false,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Flutter Development with Antigravity

Generating Flutter Widgets

You: "Create a reusable card widget with image, title, subtitle, and action button"

Gemini 3 generates:

// lib/widgets/custom_card.dart
import 'package:flutter/material.dart';

class CustomCard extends StatelessWidget {
  final String? imageUrl;
  final String title;
  final String? subtitle;
  final String? actionText;
  final VoidCallback? onActionPressed;
  final VoidCallback? onTap;
  final double elevation;
  final BorderRadius? borderRadius;

  const CustomCard({
    super.key,
    this.imageUrl,
    required this.title,
    this.subtitle,
    this.actionText,
    this.onActionPressed,
    this.onTap,
    this.elevation = 2.0,
    this.borderRadius,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final radius = borderRadius ?? BorderRadius.circular(12);

    return Card(
      elevation: elevation,
      shape: RoundedRectangleBorder(borderRadius: radius),
      clipBehavior: Clip.antiAlias,
      child: InkWell(
        onTap: onTap,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Image section
            if (imageUrl != null)
              AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(
                  imageUrl!,
                  fit: BoxFit.cover,
                  errorBuilder: (context, error, stackTrace) {
                    return Container(
                      color: theme.colorScheme.surfaceVariant,
                      child: Icon(
                        Icons.image_not_supported,
                        size: 48,
                        color: theme.colorScheme.onSurfaceVariant,
                      ),
                    );
                  },
                  loadingBuilder: (context, child, loadingProgress) {
                    if (loadingProgress == null) return child;
                    return Container(
                      color: theme.colorScheme.surfaceVariant,
                      child: Center(
                        child: CircularProgressIndicator(
                          value: loadingProgress.expectedTotalBytes != null
                              ? loadingProgress.cumulativeBytesLoaded /
                                  loadingProgress.expectedTotalBytes!
                              : null,
                        ),
                      ),
                    );
                  },
                ),
              ),
            
            // Content section
            Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: theme.textTheme.titleMedium?.copyWith(
                      fontWeight: FontWeight.bold,
                    ),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  if (subtitle != null) ...[
                    const SizedBox(height: 8),
                    Text(
                      subtitle!,
                      style: theme.textTheme.bodyMedium?.copyWith(
                        color: theme.colorScheme.onSurfaceVariant,
                      ),
                      maxLines: 3,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                  if (actionText != null && onActionPressed != null) ...[
                    const SizedBox(height: 16),
                    Align(
                      alignment: Alignment.centerRight,
                      child: FilledButton(
                        onPressed: onActionPressed,
                        child: Text(actionText!),
                      ),
                    ),
                  ],
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// lib/providers/products_provider.dart import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:freezed_annotation/freezed_annotation.dart'; part 'products_provider.freezed.dart'; @freezed class Product with _$Product { const factory Product({ required String id, required String name, required String description, required double price, required String imageUrl, @Default(0) int quantity, }) = _Product; factory Product.fromJson(Map<String, dynamic> json) => _$ProductFromJson(json); } @freezed class ProductsState with _$ProductsState { const factory ProductsState({ @Default([]) List<Product> products, @Default(false) bool isLoading, String? error, }) = _ProductsState; } class ProductsNotifier extends StateNotifier<ProductsState> { ProductsNotifier() : super(const ProductsState()); Future<void> loadProducts() async { state = state.copyWith(isLoading: true, error: null); try { // Simulate API call await Future.delayed(const Duration(seconds: 1)); final products = [ const Product( id: '1', name: 'Product 1', description: 'Description 1', price: 29.99, imageUrl: 'https://example.com/product1.jpg', ), // More products... ]; state = state.copyWith(products: products, isLoading: false); } catch (e) { state = state.copyWith(error: e.toString(), isLoading: false); } } void addProduct(Product product) { state = state.copyWith( products: [...state.products, product], ); } void updateProduct(Product product) { state = state.copyWith( products: state.products.map((p) { return p.id == product.id ? product : p; }).toList(), ); } void deleteProduct(String id) { state = state.copyWith( products: state.products.where((p) => p.id != id).toList(), ); } void updateQuantity(String id, int delta) { state = state.copyWith( products: state.products.map((p) { if (p.id == id) { final newQuantity = (p.quantity + delta).clamp(0, 99); return p.copyWith(quantity: newQuantity); } return p; }).toList(), ); } } final productsProvider = StateNotifierProvider<ProductsNotifier, ProductsState>((ref) { return ProductsNotifier(); }); // Derived providers final productByIdProvider = Provider.family<Product?, String>((ref, id) { final state = ref.watch(productsProvider); return state.products.firstWhere( (p) => p.id == id, orElse: () => throw Exception('Product not found'), ); }); final cartTotalProvider = Provider<double>((ref) { final state = ref.watch(productsProvider); return state.products.fold(0.0, (sum, p) => sum + (p.price * p.quantity)); });

// src/components/ProductList.tsx import React, { useCallback, useState } from 'react'; import { FlatList, RefreshControl, StyleSheet, View, Text, Image, TouchableOpacity, ActivityIndicator, } from 'react-native'; interface Product { id: string; name: string; price: number; imageUrl: string; description: string; } interface ProductListProps { initialProducts: Product[]; onLoadMore: () => Promise<Product[]>; onRefresh: () => Promise<Product[]>; onProductPress: (product: Product) => void; } export function ProductList({ initialProducts, onLoadMore, onRefresh, onProductPress, }: ProductListProps) { const [products, setProducts] = useState<Product[]>(initialProducts); const [refreshing, setRefreshing] = useState(false); const [loadingMore, setLoadingMore] = useState(false); const [hasMore, setHasMore] = useState(true); const handleRefresh = useCallback(async () => { setRefreshing(true); try { const freshProducts = await onRefresh(); setProducts(freshProducts); setHasMore(true); } catch (error) { console.error('Refresh failed:', error); } finally { setRefreshing(false); } }, [onRefresh]); const handleLoadMore = useCallback(async () => { if (loadingMore || !hasMore) return; setLoadingMore(true); try { const moreProducts = await onLoadMore(); if (moreProducts.length === 0) { setHasMore(false); } else { setProducts((prev) => [...prev, ...moreProducts]); } } catch (error) { console.error('Load more failed:', error); } finally { setLoadingMore(false); } }, [onLoadMore, loadingMore, hasMore]); const renderProduct = useCallback( ({ item }: { item: Product }) => ( <TouchableOpacity style={styles.productCard} onPress={() => onProductPress(item)} activeOpacity={0.7} > <Image source={{ uri: item.imageUrl }} style={styles.productImage} /> <View style={styles.productInfo}> <Text style={styles.productName} numberOfLines={2}> {item.name} </Text> <Text style={styles.productDescription} numberOfLines={2}> {item.description} </Text> <Text style={styles.productPrice}> ${item.price.toFixed(2)} </Text> </View> </TouchableOpacity> ), [onProductPress] ); const renderFooter = useCallback(() => { if (!loadingMore) return null; return ( <View style={styles.footer}> <ActivityIndicator size="small" color="#0066cc" /> <Text style={styles.footerText}>Loading more...</Text> </View> ); }, [loadingMore]); const renderEmpty = useCallback( () => ( <View style={styles.emptyContainer}> <Text style={styles.emptyText}>No products found</Text> <TouchableOpacity onPress={handleRefresh} style={styles.retryButton}> <Text style={styles.retryText}>Tap to refresh</Text> </TouchableOpacity> </View> ), [handleRefresh] ); return ( <FlatList data={products} renderItem={renderProduct} keyExtractor={(item) => item.id} refreshControl={ <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} colors={['#0066cc']} tintColor="#0066cc" /> } onEndReached={handleLoadMore} onEndReachedThreshold={0.5} ListFooterComponent={renderFooter} ListEmptyComponent={renderEmpty} contentContainerStyle={products.length === 0 && styles.emptyList} showsVerticalScrollIndicator={false} ItemSeparatorComponent={() => <View style={styles.separator} />} /> ); } const styles = StyleSheet.create({ productCard: { flexDirection: 'row', backgroundColor: '#fff', borderRadius: 12, padding: 12, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 3, }, productImage: { width: 80, height: 80, borderRadius: 8, backgroundColor: '#f0f0f0', }, productInfo: { flex: 1, marginLeft: 12, justifyContent: 'center', }, productName: { fontSize: 16, fontWeight: '600', color: '#333', }, productDescription: { fontSize: 14, color: '#666', marginTop: 4, }, productPrice: { fontSize: 18, fontWeight: '700', color: '#0066cc', marginTop: 8, }, separator: { height: 12, }, footer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingVertical: 16, }, footerText: { marginLeft: 8, color: '#666', }, emptyList: { flexGrow: 1, }, emptyContainer: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingVertical: 32, }, emptyText: { fontSize: 16, color: '#666', }, retryButton: { marginTop: 12, padding: 12, }, retryText: { color: '#0066cc', fontSize: 14, }, });

// src/navigation/AppNavigator.tsx import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { Ionicons } from '@expo/vector-icons'; // Screens import { HomeScreen } from '@/screens/HomeScreen'; import { ProductsScreen } from '@/screens/ProductsScreen'; import { ProductDetailScreen } from '@/screens/ProductDetailScreen'; import { CartScreen } from '@/screens/CartScreen'; import { ProfileScreen } from '@/screens/ProfileScreen'; import { SettingsScreen } from '@/screens/SettingsScreen'; // Type definitions export type RootStackParamList = { Main: undefined; ProductDetail: { productId: string }; Cart: undefined; Settings: undefined; }; export type MainTabParamList = { Home: undefined; Products: undefined; Profile: undefined; }; const Stack = createNativeStackNavigator<RootStackParamList>(); const Tab = createBottomTabNavigator<MainTabParamList>(); function MainTabs() { return ( <Tab.Navigator screenOptions={({ route }) => ({ tabBarIcon: ({ focused, color, size }) => { let iconName: keyof typeof Ionicons.glyphMap; switch (route.name) { case 'Home': iconName = focused ? 'home' : 'home-outline'; break; case 'Products': iconName = focused ? 'grid' : 'grid-outline'; break; case 'Profile': iconName = focused ? 'person' : 'person-outline'; break; default: iconName = 'ellipse'; } return <Ionicons name={iconName} size={size} color={color} />; }, tabBarActiveTintColor: '#0066cc', tabBarInactiveTintColor: 'gray', headerShown: false, })} > <Tab.Screen name="Home" component={HomeScreen} /> <Tab.Screen name="Products" component={ProductsScreen} /> <Tab.Screen name="Profile" component={ProfileScreen} /> </Tab.Navigator> ); } export function AppNavigator() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} /> <Stack.Screen name="ProductDetail" component={ProductDetailScreen} options={{ title: 'Product Details', headerBackTitle: 'Back', }} /> <Stack.Screen name="Cart" component={CartScreen} options={{ title: 'Shopping Cart', presentation: 'modal', }} /> <Stack.Screen name="Settings" component={SettingsScreen} options={{ title: 'Settings' }} /> </Stack.Navigator> </NavigationContainer> ); }

Google Antigravity for Mobile Development: Flutter & React Native with Gemini 3

Google Antigravity for Mobile Development: Flutter & React Native with Gemini 3

Setting Up Mobile Development

Flutter Setup

React Native Setup

Flutter Development with Antigravity

Generating Flutter Widgets

Related Posts

Refactoring Legacy Code with Google Antigravity: AI-Powered Modernization Strategies

Google Antigravity Workflow Automation: Custom Tasks, Hooks & AI-Powered Pipelines

Google Antigravity Artifacts Explained: Understanding AI-Generated Code Previews

State Management with Riverpod

React Native Development

Generating Components

Navigation with React Navigation

Platform-Specific Code

Flutter Platform Channels

React Native Native Modules

GEMINI.md for Mobile

Conclusion