simple_tip 0.2.1

A widget for showing tips to it's child that automatically setup position

example/lib/main.dart

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

void main() {
  runApp(MaterialApp(debugShowCheckedModeBanner: false, home: TipScreen()));
}

class TipScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(children: [
            SimpleTip(
              title: 'example title',
              message: 'This tip will show bellow left',
              child: BlockOfText('Top Left Widget', Colors.amber),
            ),
            Spacer(),
            SimpleTip(
              message: 'This tip will show bellow right',
              child: BlockOfText('Top Right Widget', Colors.indigo),
            ),
          ]),
          ElevatedButton(
            onPressed: () => Navigator.of(context)
                .push(MaterialPageRoute(builder: (_) => TipOrderedScreen())),
            child: Text('Try Ordered Tips'),
          ),
          SimpleTip(
            message: 'This tip will show above',
            child: BlockOfText('Bottom Widget', Colors.cyan),
          ),
        ],
      ),
    );
  }
}

class TipOrderedScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(children: [
            OrderedTip(
              groupId: 'group1',
              id: 'tip1',
              order: 1,
              version: 1,
              message: 'First very long long long long long tip',
              child: BlockOfText('Top Left Widget', Colors.amber),
            ),
            Spacer(),
            OrderedTip(
              groupId: 'group1',
              id: 'tip3',
              order: 3,
              version: 1,
              message: 'Third tip',
              child: BlockOfText('Top Right Widget', Colors.indigo),
            ),
          ]),
          OrderedTip(
            groupId: 'group1',
            id: 'tip2',
            order: 2,
            version: 1,
            message: 'Second tip',
            child: BlockOfText('Bottom Widget', Colors.cyan),
          ),
        ],
      ),
    );
  }
}

class BlockOfText extends StatelessWidget {
  final String text;

  final Color color;

  const BlockOfText(this.text, this.color);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      margin: const EdgeInsets.all(4.0),
      padding: const EdgeInsets.all(8.0),
      child: Text(text, textAlign: TextAlign.center),
    );
  }
}