UI Screen

Developing the first screen in Flutter App

The home screen has two tabs Users and Summary, what we are trying to achieve is shown as below.

• 

• 

1. Add 2 tab bars using CupertinoTabBar and BottomNavigationBarItem
2. New pages for Users and Summary that will be shown when the BottomNavigationBarItems are selected.
3. Users page within a navigation bar and a button for adding new user
4. User page with list of dummy user data.
5. Summary page within a navigation bar and button for exporting the expenses.
6. Summary page with list of dummy data.

In main.dart

import 'package:easysplit/UserPage.dart';
import 'package:easysplit/summary.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Easy Split',
      home: HomePage(),
    );
  }
}

// Main Screen
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Widget> _pages = [
    UserPage(), // see the User Page
    SummaryPage() // see the Summary Page
  ];

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: CupertinoTabScaffold(
          tabBar: CupertinoTabBar(
            items: [
              BottomNavigationBarItem(icon: Icon(Icons.people)),
              BottomNavigationBarItem(icon: Icon(Icons.money))
            ],
          ),
          tabBuilder: (BuildContext context, index) {
            return _pages[index];
          }),
    );
  }
}

userPage.dart

import 'package:flutter/widgets.dart';
import 'package:flutter/cupertino.dart';

class UserPage extends StatelessWidget {
  final List<String> _users = ['Ravi', 'Ganesh', 'Prabhu', 'Venkatesh'];

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Users'),
        trailing: CupertinoButton(
          padding: EdgeInsets.zero,
          child: Icon(
            CupertinoIcons.add,
            size: 35,
          ),
          onPressed: () {},
        ),
      ),
      child: ListView(
        children: _users
            .map(
              (w) => Container(
                padding: EdgeInsets.all(16),
                child: Text(w),
              ),
            )
            .toList(),
      ),
    );
  }
}

summaryPage.dart

import 'package:flutter/widgets.dart';
import 'package:flutter/cupertino.dart';

class SummaryPage extends StatelessWidget {
  final List<String> _words = ['Ravi', 'Ganesh', 'Prabhu', 'Venkatesh'];

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Summary'),
        trailing: CupertinoButton(
          padding: EdgeInsets.zero,
          child: Icon(
            CupertinoIcons.share,
            size: 35,
          ),
          onPressed: () {},
        ),
      ),
      child: ListView(
        children: _words
            .map(
              (w) => Container(
                padding: EdgeInsets.all(16),
                child: Text(w),
              ),
            )
            .toList(),
      ),
    );
  }
}

References

1. Cupertino Bottom Bar example
2. Flutter Widget Livebook