Create new Flutter project
Setup · Pattern / syntaxflutter create my_app Search code, tasks or categories in English or Spanish. Each entry has a link to save or share it.
Showing 51 of 51 entries
Flutter: import package:flutter/material.dart. Snippets belong inside your app; patterns need variables or ellipses filled in.
flutter create my_app flutter run flutter build apk --release flutter build ios --release Requires macOS, Xcode and signing configuration for a device build.
Documentationflutter pub add package_name flutter pub get flutter doctor flutter clean Text('Hello', style: TextStyle(fontSize: 20)) Icon(Icons.star, color: Colors.amber) Image.asset('assets/logo.png') Declare assets/logo.png in pubspec.yaml under flutter: assets:.
Image.network('https://...') ElevatedButton(onPressed: () {}, child: Text('Go')) TextButton(onPressed: () {}, child: Text('Go')) IconButton(icon: Icon(Icons.add), onPressed: () {}) TextField(decoration: InputDecoration(labelText: 'Name')) Switch(value: on, onChanged: (v) {}) Checkbox(value: checked, onChanged: (v) {}) CircularProgressIndicator() Container(padding: EdgeInsets.all(16), color: Colors.blue) Padding(padding: EdgeInsets.all(8), child: ...) Center(child: ...) Column(children: [w1, w2, w3]) Row(children: [w1, w2, w3]) Stack(children: [bg, overlay]) Expanded(flex: 2, child: ...) Use under Row, Column or Flex with bounded space along the main axis.
SizedBox(height: 16, width: 200) Wrap(children: [...]) SingleChildScrollView(child: Column(...)) ListView.builder(itemCount: n, itemBuilder: (c, i) => ...) GridView.count(crossAxisCount: 2, children: [...]) import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(home: Greeting()));
class Greeting extends StatelessWidget {
const Greeting({super.key});
@override
Widget build(BuildContext context) {
return const Scaffold(body: Center(child: Text('Hello')));
}
} Standalone lib/main.dart for a Flutter project. Other widget snippets on this page belong inside an existing app.
Documentationclass MyWidget extends StatefulWidget {
State<MyWidget> createState() => _S();
} setState(() { count++; }); @override
void initState() { super.initState(); } @override
void dispose() { ...; super.dispose(); } final _controller = TextEditingController(); Keep the controller in State, pass it to TextField(controller: ...) and dispose it in State.dispose().
final count = ValueNotifier<int>(0);
ValueListenableBuilder<int>(
valueListenable: count,
builder: (context, value, child) => Text('$value'),
) Keep count as a State field, change count.value to update, and call count.dispose() from State.dispose().
DocumentationFutureBuilder(future: fetch(), builder: (c, snap) => ...) StreamBuilder(stream: s, builder: (c, snap) => ...) Navigator.push(context, MaterialPageRoute(builder: (c) => NextPage())) Use inside a callback with a BuildContext below a Navigator. Define NextPage or value where used.
DocumentationNavigator.pop(context) Call from a callback on a route that can be popped. The context must be below its Navigator.
DocumentationNavigator.pushNamed(context, '/details') Register '/details' in MaterialApp.routes or provide onGenerateRoute. Named routes are not recommended for most new apps; use a routing package for complex deep links.
DocumentationNavigator.pushReplacement<void, void>(
context,
MaterialPageRoute<void>(builder: (_) => NextPage()),
); Inside a callback with a context below Navigator; define NextPage in your app.
Documentationfinal result = await Navigator.push<String>(
context,
MaterialPageRoute<String>(builder: (_) => NextPage()),
);
if (!context.mounted) return; Use an async callback. NextPage can return a String with Navigator.pop(context, value); going back without a value returns null.
DocumentationNavigator.pop(context, value); The type of value must match the result type of the pushed route.
DocumentationEdgeInsets.symmetric(horizontal: 16, vertical: 8) BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(8)) Theme.of(context).textTheme.headlineLarge MediaQuery.of(context).size.width MaterialApp(theme: ThemeData(primarySwatch: Colors.blue)) Find Flutter CLI commands, widgets, layout, state and navigation patterns. Search by category or code, copy a snippet, or save its entry link. Patterns require your own variables, widget tree and application context.
Use Expanded inside Row, Column or Flex with bounded constraints. Dispose controllers owned by State. After an asynchronous operation, check context.mounted before using that context. Named routes need registration; complex deep links usually need a routing solution. Documentation links beside the relevant entries provide context.
Free. No signup. Your inputs stay in your browser. Ads via Google AdSense (consent required).
By Marco B. ·