flexiflow 1.0.0+4

A responsive and flexible solution designed to effortlessly adapt to your needs, providing a seamless and dev-friendly experience.

example/lib/main.dart

import 'package:flexiflow/flexiflow.dart';
import 'package:flexiflow_example/presentation/base_flow_lab/base_flow_lab_page.dart';
import 'package:flexiflow_example/presentation/custom_flow_lab/custom_flow_lab_page.dart';
import 'package:flexiflow_example/presentation/responsive_lab/responsive_lab_page.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    FlexiFlow(
      designSize: Size(1920, 1080),
      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flexiflow Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigoAccent),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({
    super.key,
  });

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Scaffold(
      appBar: AppBar(
        backgroundColor: theme.colorScheme.inversePrimary,
        title: Text('FlexiFlow Example'),
      ),
      body: CustomScrollView(
        slivers: [
          SliverFillRemaining(
            hasScrollBody: false,
            child: SizedBox(
              width: double.infinity,
              child: Padding(
                padding: const EdgeInsets.all(24),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'Choose your laboratory:',
                      style: theme.textTheme.titleLarge,
                      textAlign: TextAlign.center,
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(
                        vertical: 16,
                      ),
                      child: SizedBox(
                        width: 200.limW(
                          min: 200,
                          max: 250,
                        ),
                        child: ElevatedButton(
                          onPressed: () => Navigator.of(context).push(
                            MaterialPageRoute(
                              builder: (context) => const ResponsiveLabPage(),
                            ),
                          ),
                          child: Padding(
                            padding: const EdgeInsets.all(8),
                            child: Text(
                              'Responsive Lab',
                              style: theme.textTheme.bodyLarge,
                            ),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(
                      width: 200.limW(
                        min: 200,
                        max: 250,
                      ),
                      child: ElevatedButton(
                        onPressed: () => Navigator.of(context).push(
                          MaterialPageRoute(
                              builder: (context) => const BaseFlowLabPage()),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(8),
                          child: Text(
                            'Base Flow Lab',
                            style: theme.textTheme.bodyLarge,
                          ),
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(
                        top: 16,
                      ),
                      child: SizedBox(
                        width: 200.limW(
                          min: 200,
                          max: 250,
                        ),
                        child: ElevatedButton(
                          onPressed: () => Navigator.of(context).push(
                            MaterialPageRoute(
                              builder: (context) => const CustomFlowLabPage(),
                            ),
                          ),
                          child: Padding(
                            padding: const EdgeInsets.all(8),
                            child: Text(
                              'Custom Flow Lab',
                              style: theme.textTheme.bodyLarge,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}