flutterflow_components 0.2.6

A complete, open source, rapid development package for creating apps using Flutter/Dart.

example/README.md

🚀 Access All Components Example (The Easy Way) 🚀

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart'
    as components;

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('FlutterFlow Components Example'),
        ),
        body: Center(
          child: Text(
            'Welcome to FlutterFlow Components!',
            style: components.getRegularStyle(
                color: Colors
                    .black), //This (components.) allows you to access all components
          ),
        ),
      ),
    );
  }
}

🎨 Access Components Individually Examples (The Traditional Way) 🎨

App Colors 🍭

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Colors Example'),
          backgroundColor: AppColors.primaryColor,
        ),
        body: Container(
          color: AppColors.backgroundColor,
          child: Center(
            child: Text(
              'This is an example of using App Colors',
              style: TextStyle(color: AppColors.textColor),
            ),
          ),
        ),
      ),
    ),
  );
}

App Fonts 📝

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Fonts Example'),
        ),
        body: Center(
          child: Text(
            'This is an example of using App Fonts',
            style: getBoldStyle(),
          ),
        ),
      ),
    ),
  );
}

App Text Styles ✨

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Text Styles Example'),
        ),
        body: Center(
          child: Text(
            'This is an example of using App Text Styles',
            style: getSemiBoldStyle(),
          ),
        ),
      ),
    ),
  );
}

App Local Assets 🖼️

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Local Assets Example'),
        ),
        body: Center(
          child: Image.asset(
            AppAssets.logo,
            width: 150,
            height: 150,
          ),
        ),
      ),
    ),
  );
}

App Local Constants 📌

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Local Constants Example'),
        ),
        body: Center(
          child: Text(
            'This is an example of using App Local Constants: ${AppConstants.appName}',
          ),
        ),
      ),
    ),
  );
}

App Enums 🔢

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Enums Example'),
        ),
        body: Center(
          child: Text(
            'This is an example of using App Enums: ${AppAxis.horizontal}',
          ),
        ),
      ),
    ),
  );
}

App Extensions 🚀

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Extensions Example'),
        ),
        body: Center(
          child: Text(
            'This is an example of using App Extensions: ${'Hello'.capitalize()}',
          ),
        ),
      ),
    ),
  );
}

App Values 📏

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Values Example'),
        ),
        body: Padding(
          padding: AppPadding.all,
          child: Container(
            width: AppSize.large,
            height: AppSize.medium,
            color: AppColors.primaryColor,
            child: Center(
              child: Text(
                'This is an example of using App Values',
                style: getMediumStyle(),
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

Buttons 🛍️

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Buttons Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              textFieldA(),
              SizedBox(height: AppMargin.small),
              loadButton(),
              SizedBox(height: AppMargin.small),
              buttonA(),
            ],
          ),
        ),
      ),
    ),
  );
}

Fonts 🎀

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fonts Example'),
        ),
        body: Center(
          child: Text(
            'This is an example of using Fonts',
            style: fontPoppins(),
          ),
        ),
      ),
    ),
  );
}

MultipleItemSelect ✅

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MultipleItemSelect Example'),
        ),
        body: MultipleItemSelect(
          items: ['Item 1', 'Item 2', 'Item 3'],
          onSelectionChanged: (selectedItems) {
            print('Selected Items: $selectedItems');
          },
        ),
      ),
    ),
  );
}

Toast Show 🍞

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Toast Show Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showToast('This is a toast message!');
            },
            child: Text('Show Toast'),
          ),
        ),
      ),
    ),
  );
}

Widgets Display 🧩

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Widgets Display Example'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            columnHomeItems(),
            itemsList(),
            simpleCard(),
            rowHomeItems(),
            socialMediaItem(),
          ],
        ),
      ),
    ),
  );
}

Responsiveness 📱

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Responsiveness Example'),
        ),
        body: Container(
          height: getHeight(50),
          width: getWidth(80),
          color: AppColors.primaryColor,
          child: Center(
            child: Text(


              'This is an example of using Responsiveness',
              style: getMediumStyle(),
            ),
          ),
        ),
      ),
    ),
  );
}

Images Preview 🖼️

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Images Preview Example'),
        ),
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              logoContainer(),
              previewProductImage(),
              buildProductDetails(),
              socialMediaItems(),
              previewBase64Image(),
              chooseFile(),
            ],
          ),
        ),
      ),
    ),
  );
}

General ⚙️

import 'package:flutter/material.dart';
import 'package:flutterflow_components/flutterflow_components.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('General Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              generateCode();
              validateForm();
              openUrl('https://example.com');
              assetToUint8List('assets/image.png');
              getWidgetByIndex(0);
              getDateTimeToDay(DateTime.now());
            },
            child: Text('General Functions'),
          ),
        ),
      ),
    ),
  );
}

Happy Fluttering! 💙