example.md

at_chat_flutter example

The at_chat_flutter package is designed to make it easy to add a chat feature between atSigns to any flutter app built on the atPlatform.

Give it a try

This package includes a working sample application in the example directory that demonstrates the key features of the package. To create a personalized copy, use at_app create as shown below or check it out on GitHub.

$ flutter pub global activate at_app 
$ at_app create --sample=<package ID> <app name> 
$ cd <app name>
$ flutter run

Notes:

1. You only need to run flutter pub global activate once
2. Use at_app.bat for Windows

For more details head over to at_app Flags documentation.

What will be this doing?

• This command will generate a simple skeleton of your at_app.
• Go to the .env file and add your namespace if you haven't passed it as an argument.

How it works

Like most applications built for the atPlatform, we start with the at_onboarding_flutter widget which handles secure management of secret keys for an atsign as cryptographically secure replacement for usernames and passwords.

After onboarding, the second screen will have the app functionality.

The package includes the following UI components:

• The chat screen as a full page
• The chat screen in a bottom sheet

You can customise them as described in the third screen sample usage. The package also manages all the data it needs for you

Sample Usage

The app needs to initialise the chat service

initializeChatService(atClientManager, activeAtSign!,
        rootDomain: AtEnv.rootDomain);

As a bottom sheet

FlatButton(
    onPressed: () {
        scaffoldKey.currentState
        .showBottomSheet((context) => ChatScreen());
    },
    child: Container(
        height: 40,
        child: Text('Open chat in bottom sheet'),
    ),
),

As a screen

class ThirdScreen extends StatefulWidget {
  @override
  _ThirdScreenState createState() => _ThirdScreenState();
}

class _ThirdScreenState extends State<ThirdScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Chat Screen')),
      body: ChatScreen(
        height: MediaQuery.of(context).size.height,
        incomingMessageColor: Colors.blue[100],
        outgoingMessageColor: Colors.green[100],
        isScreen: true,
      ),
    );
  }
}

Like everything else we do, this package and even the sample application are open source software which means we love it when you gift us with your feedback, contributions and even any bugs that you help us to discover. See CONTRIBUTING.md for detailed guidance on how to setup tools, tests and make a pull request.