apollo_flutter 3.1.0-OMNI1632.2

the Apollo service of the Terra platform.

example/lib/main.dart

import 'package:apollo_flutter/apollo_theme.dart';
import 'package:apollo_flutter/terra_apollo.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ApolloColorTheme? _colorTheme;
  TierTheme? _tierTheme;

  void _initApollo() async {
    final apollo = await TerraApollo.getInstance("apollo-flutter");
    setState(() {
      _colorTheme = apollo.getTheme().colors;
      _tierTheme = apollo.getTheme().tierTheme;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Apollo Flutter example app'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            TextButton(
              onPressed: _initApollo,
              child: const Text(
                'Init Apollo',
              ),
            ),
            if (_colorTheme != null) ColorThemeView(colorTheme: _colorTheme!),
            Divider(color: Colors.grey[300]),
            if (_tierTheme != null) TierThemeView(tierTheme: _tierTheme!)
          ],
        ),
      ),
    );
  }
}

class ColorThemeView extends StatelessWidget {
  final ApolloColorTheme colorTheme;

  const ColorThemeView({Key? key, required this.colorTheme}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: SingleChildScrollView(
        child: Column(
          children: [
            ColorSetView(name: "primary", colorSet: colorTheme.primary),
            ColorSetView(name: "link", colorSet: colorTheme.link),
            ColorSetView(name: "pending", colorSet: colorTheme.pending),
            ColorSetView(name: "success", colorSet: colorTheme.success),
            ColorSetView(name: "error", colorSet: colorTheme.error),
            NeutralColorSetView(colorSet: colorTheme.neutral),
          ],
        ),
      ),
    );
  }
}

class ColorSetView extends StatelessWidget {
  final String name;
  final ApolloColorSet colorSet;

  const ColorSetView({Key? key, required this.name, required this.colorSet}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            name,
            style: const TextStyle(fontWeight: FontWeight.bold),
          ),
          IntrinsicHeight(
            child: Row(
              children: [
                ColorItemView(name: "50", color: colorSet.color50),
                ColorItemView(name: "100", color: colorSet.color100),
                ColorItemView(name: "200", color: colorSet.color200),
                ColorItemView(name: "500", color: colorSet.color500),
                ColorItemView(name: "600", color: colorSet.color600),
                ColorItemView(name: "700", color: colorSet.color700),
              ],
            ),
          ),
          const SizedBox(height: 24),
        ],
      ),
    );
  }
}

class NeutralColorSetView extends StatelessWidget {
  final ApolloNeutralColorSet colorSet;

  const NeutralColorSetView({Key? key, required this.colorSet}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            "Neutral",
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          IntrinsicHeight(
            child: Row(
              children: [
                ColorItemView(name: "white", color: colorSet.white),
                ColorItemView(name: "tableHeader", color: colorSet.tableHeader),
                ColorItemView(name: "background", color: colorSet.background),
                ColorItemView(name: "divider", color: colorSet.divider),
                ColorItemView(name: "disable", color: colorSet.disable),
                ColorItemView(name: "border", color: colorSet.border),
                ColorItemView(name: "placeholder", color: colorSet.placeholder),
                ColorItemView(name: "secondaryText", color: colorSet.secondaryText),
                ColorItemView(name: "titleText", color: colorSet.titleText),
              ],
            ),
          ),
          const SizedBox(height: 24),
        ],
      ),
    );
  }
}

class ColorItemView extends StatelessWidget {
  final String name;
  final Color color;

  const ColorItemView({Key? key, required this.name, required this.color}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Column(
        children: [
          Container(
            height: 60,
            color: color,
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 4.0),
            child: Text(name),
          ),
        ],
      ),
    );
  }
}

class TierThemeView extends StatelessWidget {
  const TierThemeView({Key? key, required this.tierTheme}) : super(key: key);
  
  final TierTheme tierTheme;
  
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            "Tier Theme",
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
          ),
          const SizedBox(height: 12),
          
          Row(
            children: [
              const Expanded(
                child: Text(
                  "Primary Text Color",
                  style: TextStyle(fontWeight: FontWeight.w500),
                ),
              ),
              tierTheme.primaryTextColor != null ?
                Container(
                  width: 60,
                  height: 60,
                  decoration: BoxDecoration(
                    color: tierTheme.primaryTextColor,
                    border: Border.all(color: Colors.grey),
                    borderRadius: BorderRadius.circular(4),
                  ),
                ) : const Text("No primary text color")
            ],
          ),
          const SizedBox(height: 12),
          
          Row(
            children: [
              const Expanded(
                child: Text(
                  "Status Bar Type",
                  style: TextStyle(fontWeight: FontWeight.w500),
                ),
              ),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey),
                  borderRadius: BorderRadius.circular(4),
                ),
                child: Text(tierTheme.statusBarType?.toShortString() ?? "No status bar type") ,
              ),
            ],
          ),
          const SizedBox(height: 12),
          
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                "Background Colors",
                style: TextStyle(fontWeight: FontWeight.w500),
              ),
              const SizedBox(height: 8),
              tierTheme.backgroundColors?.isEmpty ?? true
                  ? const Text("No background colors")
                  : Wrap(
                      spacing: 8,
                      runSpacing: 8,
                      children: List.generate(
                        tierTheme.backgroundColors?.length ?? 0,
                        (index) {
                          final bgColor = tierTheme.backgroundColors![index];
                          return Column(
                            children: [
                              Container(
                                width: 80,
                                height: 60,
                                decoration: BoxDecoration(
                                  color: bgColor.toColor(),
                                  border: Border.all(color: Colors.grey),
                                  borderRadius: BorderRadius.circular(4),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.only(top: 4),
                                child: Text(
                                  "${(bgColor.opacity * 100).toStringAsFixed(0)}%",
                                  style: const TextStyle(fontSize: 12),
                                ),
                              ),
                            ],
                          );
                        },
                      ),
                    ),
            ],
          ),
          const SizedBox(height: 24),
        ],
      ),
    );
  }
}