CupertinoPageRoute In Flutter

CupertinoPageRoute In Flutter :

Screenshot :

Screenshot 2 :

add_todo.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;

class AddTodoScreen extends StatefulWidget {
  @override
  _AddTodoScreenState createState() => _AddTodoScreenState();
}

class _AddTodoScreenState extends State<AddTodoScreen> {
  final FocusNode textFieldFocusNode = FocusNode();

  Future<bool> _onWillPop() {
    FocusScope.of(context).requestFocus(new FocusNode());
    return Future.value(true);
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
    _focusOnTextField();
  }

  @override
  void dispose() {
    textFieldFocusNode.dispose();
    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // timeDilation = 10.0;
    TextStyle buttonTextStyle = Theme.of(context).textTheme.title.copyWith(
        fontSize: 20.0, fontWeight: FontWeight.bold, color: Colors.white);
    TextStyle hintTextStyle = Theme
        .of(context)
        .textTheme
        .title
        .copyWith(fontSize: 25.0, color: Colors.grey);
    return WillPopScope(
      onWillPop: _onWillPop,
      child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0.0,
            iconTheme: IconThemeData(
              color: Colors.black,
            ),
          ),
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              ListView(
                shrinkWrap: true,
                padding: const EdgeInsets.symmetric(horizontal: 20.0),
                children: <Widget>[
                  TextField(
                    focusNode: textFieldFocusNode,
                    maxLines: 5,
                    decoration: InputDecoration.collapsed(
                        hintStyle: hintTextStyle,
                        hintText: 'What do you want to add now ?'),
                  ),
                ],
              ),
              Expanded(
                child: Container(),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Hero(
                  tag: 'add_task',
                  child: ButtonTheme(
                    minWidth: double.infinity,
                    child: RaisedButton(
                      elevation: 10.0,
                      padding: const EdgeInsets.all(10.0),
                      color: Colors.blue,
                      onPressed: () {},
                      child: Icon(
                        Icons.add,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              )
            ],
          )),
    );
  }

  void _focusOnTextField() async{
    await Future.delayed(Duration(milliseconds: 300));
    FocusScope.of(context).requestFocus(textFieldFocusNode);
  }
}

main.dart

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

import 'add_todo.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Tutorial',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => TodoAppHome(title: 'Flutter UI'),
        '/addTodo': (context) => AddTodoScreen()
      },
    );
  }
}

class TodoAppHome extends StatefulWidget {
  final String title;
  TodoAppHome({this.title});

  @override
  _TodoAppHomeState createState() => _TodoAppHomeState();
}

class _TodoAppHomeState extends State<TodoAppHome> {
  @override
  Widget build(BuildContext context) {
    TextStyle titleTextStyle =
        Theme.of(context).textTheme.title.copyWith(fontSize: 20.0);
    TextStyle subtitleTextStyle = Theme
        .of(context)
        .textTheme
        .title
        .copyWith(fontSize: 20.0, color: Colors.grey);

    return Scaffold(
      backgroundColor: Colors.grey[200],
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        heroTag: 'add_task',
        onPressed: () {
          Navigator.push(
            context,
            new MyCustomRoute(builder: (context) => new AddTodoScreen()),
          );
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      body: Container(
        margin: const EdgeInsets.only(top: 22.0),
        child: Column(
          children: <Widget>[
            _buildHeaderRow(titleTextStyle, subtitleTextStyle),
            new TodoItemCard(
                titleText: 'Cricket', subtitle: 'Due Fri Aug 10'),
            new TodoItemCard(
                titleText: 'Football', subtitle: 'Due Sun Aug 12'),
          ],
        ),
      ),
    );
  }

  Row _buildHeaderRow(TextStyle titleText, TextStyle subtitleText) {
    return Row(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                "Welcome Flutter Tutorial",
                style: titleText,
              ),
              Text(
                "You have 2 tasks",
                style: subtitleText,
              ),
            ],
          ),
        ),
        Expanded(
          child: Container(),
        ),
        Container(
          padding: const EdgeInsets.all(10.0),
          margin: const EdgeInsets.all(10.0),
          decoration: BoxDecoration(
              border: Border.all(
                width: 1.0,
              ),
              borderRadius: BorderRadius.all(Radius.circular(50.0))),
          child: Icon(
            Icons.person,
            size: 40.0,
          ),
        )
      ],
    );
  }
}

class TodoItemCard extends StatelessWidget {
  const TodoItemCard({
    Key key,
    @required this.subtitle,
    @required this.titleText,
  }) : super(key: key);

  final String subtitle, titleText;
  @override
  Widget build(BuildContext context) {
    TextStyle cardTitleTextStyle =
        Theme.of(context).textTheme.title.copyWith(fontSize: 20.0);
    TextStyle subtitleTextStyle = Theme
        .of(context)
        .textTheme
        .title
        .copyWith(fontSize: 20.0, color: Colors.grey);
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 2.0),
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    titleText,
                    style: cardTitleTextStyle,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 8.0),
                    child: Text(
                      subtitle,
                      style: subtitleTextStyle,
                    ),
                  ),
                ],
              ),
              Expanded(
                child: Container(),
              ),
              Icon(Icons.timer)
            ],
          ),
        ),
      ),
    );
  }
}

class MyCustomRoute<T> extends CupertinoPageRoute<T> {
  MyCustomRoute({WidgetBuilder builder, RouteSettings settings})
      : super(builder: builder, settings: settings);

  @override
  bool get fullscreenDialog => true;
  
  @override
  Duration get transitionDuration => const Duration(milliseconds: 300);
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in