How to add tabs in a container in flutter ? Not involving appbar

穿精又带淫゛_ 提交于 2019-12-11 18:47:31

问题


I am new to flutter and decided to create a project where I am trying to implement tabs in flutter for my project. The tabs are not the navigation tabs but content-driven tabs in a screen.

Following is the mock of design I am trying to implement.

Following is the rest of code uptill now

import 'dart:async';

import 'package:flutter/material.dart';

class TimerPage extends StatefulWidget {
  TimerPage({Key key}) : super(key: key);

  TimerPageState createState() => new TimerPageState();
}

class TimerPageState extends State<TimerPage> {
  final items = <Widget>[
    ListTile(
      leading: Icon(Icons.photo_camera),
      title: Text('Camera'),
      onTap: () {},
    ),
    ListTile(
      leading: Icon(Icons.photo_library),
      title: Text('Select'),
      onTap: () {},
    ),
    ListTile(
      leading: Icon(Icons.delete),
      title: Text('Delete'),
      onTap: () {},
    ),
    Divider(),
    if (true)
      ListTile(
        title: Text('Cancel'),
        onTap: () {},
      ),
  ];
  _showSheet() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext _) {
        return Container(
          child: Wrap(
            children: items,
          ),
        );
      },
      isScrollControlled: true,
    );
  }

  int _count = 20 * 60;

  @override
  void initState() {
    super.initState();
    Timer.periodic(Duration(seconds: 1), (timer) {
      --_count;
      if (_count < 0)
        timer.cancel();
      else
        setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Row(
        children: <Widget>[
          IconButton(
              icon: Icon(
                Icons.pause_circle_outline,
                color: Colors.blue,
              ),
              onPressed: _showSheet),
          Text('${_formatSeconds(_count)}'),
          Spacer(),
          FlatButton(
              onPressed: _showSheet,
              child: Text(
                "Submit",
                style: TextStyle(
                  fontSize: 18,
                  fontFamily: 'lato',
                  color: Colors.blue,
                ),
              )),
        ],
      ),
      // Row(children: <Widget>[

      // ],)
    ]);
  }

  String _formatSeconds(int count) {
    int hours = count ~/ 3600;
    int secondsLeft = count - hours * 3600;
    int minutes = secondsLeft ~/ 60;
    int seconds = secondsLeft - minutes * 60;

    String formattedTime = "";
    if (minutes < 10) formattedTime += "0";
    formattedTime = "$minutes:";

    if (seconds < 10) formattedTime += "0";
    formattedTime += "$seconds";

    return formattedTime;
  }
}

The code is of the timer and submit (mock). Below the row containing the timer, I want to add the tabs of the question with MCQ question.

来源:https://stackoverflow.com/questions/58321427/how-to-add-tabs-in-a-container-in-flutter-not-involving-appbar

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!