Skip to content

Instantly share code, notes, and snippets.

@CMingTseng

CMingTseng/ControllerDemoPage.dart

Created November 29, 2021 08:09
Show Gist options
  • Save CMingTseng/55bbcd6e7b9ec32b5945b5ebc0e59dab to your computer and use it in GitHub Desktop.
Save CMingTseng/55bbcd6e7b9ec32b5945b5ebc0e59dab to your computer and use it in GitHub Desktop.
Download ZIP
SingleChildScrollView item size
Raw
ControllerDemoPage.dart
import 'package:flutter/material.dart';
class ControllerDemoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text(
"ControllerDemoPage",
),
),
body: SingleChildScrollView(
child: Container(
constraints:
BoxConstraints(minHeight: 100, maxHeight: double.infinity),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
constraints:
BoxConstraints(minHeight: 100, maxHeight: double.infinity),
child: Stack(
children: [
new Container(
height: 400,
color: Colors.yellow,
),
new Container(
height: 50,
color: Colors.red,
),
],
),
),
Container(
margin: EdgeInsets.only(top: 20),
constraints:
BoxConstraints(minHeight: 100, maxHeight: double.infinity),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
new Container(
height: 600,
color: Colors.green,
),
new Container(
height: 50,
color: Colors.amber,
),
],
),
),
],
),
),
),
);
}
}
@CMingTseng
Copy link
Author

import 'dart:async';
import 'dart:io';

import 'package:auto_size_text/auto_size_text.dart';
import 'package:btp/dialog/NormalDialog.dart';
import 'package:btp/pages/me/me/me_page.dart';
import 'package:btp/pages/urbanadventure/checkpoint/urban_checkpoint_widget.dart';
import 'package:btp/pages/urbanadventure/urban_test_widget.dart';
import 'package:btp/s.dart';
import 'package:btp/pages/urbanadventure/map/urban_google_map_with_search_widget.dart';
import 'package:flutter/cupertino.dart';
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_fimber/flutter_fimber.dart';
import 'package:geolocator/geolocator.dart';
import 'package:geolocator_platform_interface/geolocator_platform_interface.dart';

import 'package:google_maps_flutter/google_maps_flutter.dart';

import 'package:permission_handler/permission_handler.dart';

import 'map/locations.dart' as locations; //other locations library
import '../../r.dart';

enum ContentState {
map,
text,
}

enum TimerState {
normal,
small,
}

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

@OverRide
_UrbanPageState createState() => _UrbanPageState();
}

class _UrbanPageState extends State {
var timer_state = TimerState.normal;
var content_state = ContentState.text;

// @OverRide
// Widget build(BuildContext context) {
// return Scaffold(
// body: Container(
// decoration: BoxDecoration(
// image: DecorationImage(
// image: R.image.img_bg_2(), fit: BoxFit.fill)),
// child: SafeArea(
// child: Stack(
// children: [
// Padding(
// padding: EdgeInsets.only(top: 8),
// child: Container(
// child: Column(
// children: [
// _buildTitleBar(),
// Flexible(
// flex: 3,
// child: Column(
// children: [
// Flexible(
// flex: 5,
// child: Row(
// children: [
// Flexible(
// flex: 1,
// child: Image(
// image: R.image.img_tree_01()),
// ),
// Flexible(
// flex: 7,
// child: _buildCheckpointWithTimer(
// context,
// "99",
// "01",
// "29",
// "58")),
// ],
// )),
// Flexible(
// flex: 1,
// child: _buildMiddleHint(S
// .of(context)
// .urban_adventure_up_hint_1))
// ],
// )),
// Flexible(
// flex: 10,
// child: _buildContentEntryView(),
// )
// ],
// ),
// )),
// ],
// ))));
// }

// @OverRide
// Widget build(BuildContext context) {
// return Scaffold(
// body: Container(
// decoration: BoxDecoration(
// image: DecorationImage(
// image: R.image.img_bg_2(), fit: BoxFit.fill)),
// child: SafeArea(
// child: Stack(
// children: [
// Positioned(
// left: 0.0,
// right: 0.0,
// top: 0.0,
// child: Container(
// height: 56,
// decoration: BoxDecoration(color: Colors.blue),
// ),
// ),
// Positioned(
// left: 0.0,
// right: 0.0,
// top: 56.0,
// bottom: 0,
// child:SingleChildScrollView(
// child: Container(
// constraints: BoxConstraints(minHeight: MediaQuery.of(context).size.height, maxHeight: double.infinity),
// decoration: BoxDecoration(color: Colors.yellow),
// child: Stack(
// children: [
// Positioned(
// left: 0.0,
// right: 0.0,
// top: 0.0,
// child: Container(
// height: 56,
// decoration: BoxDecoration(color: Colors.red),
// ),
// ),])
// ),
//
//
//
// // child: Column(
// // children: List.generate(20, (index) {
// // return ElevatedButton(
// // child: Text("Button ${index+1}"),
// // onPressed: () => Null,
// // );
// // }
// // )
// // ),
//
// ),
// ),
// ],
// ))));
// }

// @OverRide
// Widget build(BuildContext context) {
// return CustomScrollView(
// slivers: [
// SliverAppBar(
// // leading :Container(
// // decoration: BoxDecoration(color: Colors.yellow),
// // ),
// pinned: true,
// floating: false,
// snap: false,
// expandedHeight: 56.0,
// flexibleSpace: const FlexibleSpaceBar(
// title: Text('ererferger'),
// ),
// // actions: [
// // IconButton(
// // icon: Icon(Icons.add_circle),
// // tooltip: '',
// // onPressed: () {
// // /* ... */
// // },
// // ),
// // ]
// ),
// SliverGrid(
// gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
// maxCrossAxisExtent: double.maxFinite,
// mainAxisSpacing: 10.0,
// crossAxisSpacing: 10.0,
// childAspectRatio: 4.0,
// ),
// delegate: SliverChildBuilderDelegate(
// (BuildContext context, int index) {
// return Container(
// alignment: Alignment.center,
// color: Colors.teal[100 * (index % 9)],
// child: Text('grid item $index'),
// );
// },
// childCount: 1,
// ),
// ),
// // SliverFixedExtentList(
// // itemExtent: 50.0,
// // delegate: SliverChildBuilderDelegate(
// // (BuildContext context, int index) {
// // return Container(
// // alignment: Alignment.center,
// // color: Colors.lightBlue[100 * (index % 9)],
// // child: Text('list item $index'),
// // );
// // },
// // ),
// // ),
// ],
// );
// }

// @OverRide
// Widget build(BuildContext context) {
// return Scaffold(
// body: CustomScrollView(
// physics: BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
// slivers: [
// SliverAppBar(
// stretch: true,
// pinned: true,
// floating: false,
// snap: false,
// expandedHeight: 56.0,
// onStretchTrigger: () {
// // Function callback for stretch
// return Future.value();
// },
// flexibleSpace: FlexibleSpaceBar(
// centerTitle: false,
// background: Stack(
// fit: StackFit.loose,
// children: [
// Container(
// decoration: BoxDecoration(color: Colors.yellow),
// )
// ],
// ),
// ),
// ),
// // SliverList(
// // delegate: SliverChildListDelegate(
// // const [
// // ListTile(
// // leading: Icon(Icons.wb_sunny),
// // title: Text('Sunday'),
// // subtitle: Text('sunny, h: 80, l: 65'),
// // ),
// // ListTile(
// // leading: Icon(Icons.wb_sunny),
// // title: Text('Monday'),
// // subtitle: Text('sunny, h: 80, l: 65'),
// // ),
// // // ListTiles++
// // ],
// // ),
// // ),
//
// SliverFixedExtentList(
// itemExtent: 500.0,
// delegate: SliverChildBuilderDelegate(
// (BuildContext context, int index) {
// return Container(
// alignment: Alignment.center,
// color: Colors.lightBlue[100 * (index % 9)],
// child: Text('list item $index'),
// );
// },
// ),
// ),
// ],
// ),
// );
// }

// constraints: BoxConstraints(minHeight: MediaQuery.of(context).size.height, maxHeight: MediaQuery.of(context).size.height),
// @OverRide
// Widget build(BuildContext context) {
// return Scaffold(
// appBar: AppBar(
// title: Text(
// "ControllerDemoPage",
// ),
// ),
// body: SingleChildScrollView(
// child: Container(
// constraints: BoxConstraints(minHeight: MediaQuery.of(context).size.height, maxHeight:MediaQuery.of(context).size.height),
// decoration: BoxDecoration(color: Colors.yellow),
// child: UrbanTestStateWidget()
// )
// ),
// );
// }

@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"ControllerDemoPage",
),
),
body: SingleChildScrollView(
child: Container(
constraints: BoxConstraints(minHeight: MediaQuery.of(context).size.height, maxHeight:MediaQuery.of(context).size.height),
child:Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child:Container(
constraints: BoxConstraints(minHeight: MediaQuery.of(context).size.height, maxHeight: double.infinity),
decoration: BoxDecoration(color: Colors.yellow),
child: Stack(
children: [
Positioned(
left: 0.0,
right: 0.0,
top: 0.0,
bottom: 270.0,
child:Container(
height: MediaQuery.of(context).size.height,
color: Colors.yellow,
)
),
Positioned(
left: 0.0,
right: 0.0,
top: 270.0,
bottom: 0.0,
child: Container(
height:MediaQuery.of(context).size.height,
color: Colors.red,
)
)

            ],
          ),
        )
      )

    ),
  ),
);

}

Widget _buildContentEntryView() {
if (content_state == ContentState.map) {
return UrbanMapWidget();
} else {
return UrbanCheckPointStateWidget();
}
}

// //TODO for debug prepare layout
// @OverRide
// Widget build(BuildContext context) {
// return Scaffold(
// body: Container(
// decoration: BoxDecoration(
// image: DecorationImage(
// image: R.image.img_bg_2(), fit: BoxFit.fill)),
// child: SafeArea(
// child: Stack(
// children: [
// Padding(
// padding: EdgeInsets.only(top: 8),
// child: Row(
// children: [
// Flexible(
// child: Column(
// children: [
// Flexible(
// flex: 1,
// child: Container(
// color: Colors.deepOrange,
// ),
// ),
// Flexible(
// flex: 2,
// child: Container(
// color: Colors.lightBlue,
// ),
// ),
// ],
// ),
// ),
// Flexible(
// child: Column(
// children: [
// Flexible(
// flex: 3,
// child: Container(
// color: Colors.orange,
// )),
// Flexible(
// flex: 1,
// child: Row(
// children: [
// Flexible(
// flex: 2,
// child: Container(
// color: Colors.blue,
// )),
// Flexible(
// child: Container(color: Colors.green))
// ],
// ),
// )
// ],
// ),
// )
// ],
// )),
// ],
// ))));
// }

Widget _buildTitleBar() {
return Align(
alignment: Alignment.topCenter,
child: Padding(
padding: EdgeInsets.fromLTRB(27, 4, 27, 0),
child: Row(
children: [
Expanded(
child: GestureDetector(
onTap: () {
Fimber.d('go to setting');
Navigator.of(context).pushNamed((MePage).toString());
},
child: Row(children: [
Container(
width: 52,
height: 55,
decoration: BoxDecoration(
image: DecorationImage(
image: R.image.img_head_frame(),
),
),
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.only(bottom: 8),
child: Image(
image: R.image.img_player_default()))),
Padding(
padding: EdgeInsets.fromLTRB(13, 0, 7, 0),
child: Image(image: R.image.icon_bcoins())),
Text('100,000',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16)),
]))),
GestureDetector(
onTap: () {
Fimber.d('go to camera');
},
child: Image(image: R.image.btn_cameral()))
],
)));
}

Widget _buildCheckpointWithTimer(BuildContext context, String? checkpoint,
String? value_hour, String? value_min, String? value_sec) {
if (timer_state == TimerState.normal) {
return _buildCheckpointWithTimerNormal(
context, checkpoint, value_hour, value_min, value_sec);
} else {
return _buildCheckpointWithTimerSmall(
context, checkpoint, value_hour, value_min, value_sec);
}
}

Widget _buildCheckpointWithTimerNormal(
BuildContext context,
String? checkpoint,
String? value_hour,
String? value_min,
String? value_sec) {
return Padding(
padding: EdgeInsets.fromLTRB(0, 24, 0, 0),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Flexible(
flex: 1,
child: Container(
width: 196,
height: 36,
alignment: FractionalOffset(0.5, 0.4),
padding: EdgeInsets.symmetric(horizontal: 7),
decoration: BoxDecoration(
image: DecorationImage(
image: R.image.img_timing(), fit: BoxFit.none)),
// child: AutoSizeText('${S.of(context).urban_adventure_checkpoint} ${checkpoint??'99'}',
child: AutoSizeText(S.of(context).urban_adventure_checkpoint,
textAlign: TextAlign.center,
maxFontSize: 14,
maxLines: 1,
style: TextStyle(
fontSize: 12,
color: Colors.white,
fontWeight: R.fontWeight.medium)),
),
),
Flexible(
flex: 1, child: _buildTimer(value_hour, value_min, value_sec)),
],
));
}

Widget _buildTimer(String? value_hour, String? value_min, String? value_sec) {
return Align(
alignment: Alignment.topCenter,
child: Container(
width: 268,
height: 50,
margin: EdgeInsets.fromLTRB(50, 0, 0, 0),
padding: EdgeInsets.all(0),
// color: Colors.blue,
child: Row(
children: [
Flexible(
flex: 5,
child: Container(
height: 50,
margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
// color: Colors.blue,
child: createTimeBlock(value_hour))),
Flexible(
flex: 1,
child: Container(
width: 12,
height: 50,
margin: EdgeInsets.fromLTRB(2, 0, 0, 4),
// color: Colors.red,
child: Image(image: R.image.img_timing_04()))),
Flexible(
flex: 5,
child: Container(
height: 50,
margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
// color: Colors.blue,
child: createTimeBlock(value_min))),
Flexible(
flex: 1,
child: Container(
width: 12,
height: 50,
margin: EdgeInsets.fromLTRB(2, 0, 0, 4),
// color: Colors.red,
child: Image(image: R.image.img_timing_04()))),
Flexible(
flex: 5,
child: Container(
height: 50,
margin: EdgeInsets.fromLTRB(4, 0, 0, 0),
// color: Colors.blue,
child: createTimeBlock(value_sec))),
],
)));
}

Widget _buildCheckpointWithTimerSmall(
BuildContext context,
String? checkpoint,
String? value_hour,
String? value_min,
String? value_sec) {
return Container(
padding: EdgeInsets.fromLTRB(44, 32, 6, 8),
child: Column(children: [
Flexible(
flex: 3,
child: Container(
margin: EdgeInsets.only(left: 0.0, right: 8.0),
width: 196,
height: 64,
alignment: FractionalOffset(0.5, 0.5),
padding: EdgeInsets.symmetric(horizontal: 7),
decoration: BoxDecoration(
image: DecorationImage(
image: R.image.img_checkpoint(), fit: BoxFit.fill)),
child: Container(
margin: EdgeInsets.only(
left: 72.0, top: 8, right: 20.0, bottom: 8),
child: Row(
children: [
AutoSizeText(S.of(context).urban_adventure_checkpoint,
textAlign: TextAlign.center,
maxFontSize: 16,
maxLines: 1,
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: R.fontWeight.medium)),
AutoSizeText(checkpoint ?? '99',
textAlign: TextAlign.center,
maxFontSize: 38,
maxLines: 1,
style: TextStyle(
fontSize: 36,
color: Colors.orange,
fontWeight: R.fontWeight.medium))
],
),
))),
Flexible(
flex: 1,
child: Container(
margin: EdgeInsets.only(
left: 64.0, top: 0, right: 64.0, bottom: 0),
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: AutoSizeText(
'${value_hour ?? '03'} : ${value_min ?? '28'} : ${value_sec ?? '05'}',
textAlign: TextAlign.center,
maxFontSize: 18,
maxLines: 1,
style: TextStyle(
fontSize: 16,
color: Colors.black,
fontWeight: R.fontWeight.medium)))),
]
// children: [
// createTimeBlock(value_hour),
// Padding(
// padding: EdgeInsets.fromLTRB(4, 0, 6, 8),
// child: Image(image: R.image.img_timing_04())),
// createTimeBlock(value_min),
// Padding(
// padding: EdgeInsets.fromLTRB(4, 0, 6, 8),
// child: Image(image: R.image.img_timing_04())),
// createTimeBlock(value_sec)
// ],
));
}

Widget _buildMiddleHint(String? info) {
return Container(
width: 360,
height: 64,
alignment: FractionalOffset(0.5, 0.45),
padding: EdgeInsets.symmetric(horizontal: 0),
decoration: BoxDecoration(
image: DecorationImage(
image: R.image.img_dialog_01(), fit: BoxFit.fill)),
child: AutoSizeText(info ?? '',
textAlign: TextAlign.center,
maxFontSize: 12,
maxLines: 1,
style: TextStyle(
fontSize: 12,
color: Colors.black,
fontWeight: R.fontWeight.medium)),
);
}

Widget createTimeBlock(String? value) {
return Container(
width: 62,
height: 50,
alignment: FractionalOffset(0.5, 0.45),
padding: EdgeInsets.symmetric(horizontal: 0),
decoration: BoxDecoration(
image: DecorationImage(
image: R.image.img_timing_03(), fit: BoxFit.fill)),
child: AutoSizeText(value ?? '1',
textAlign: TextAlign.center,
maxFontSize: 22,
maxLines: 1,
style: TextStyle(
fontSize: 20,
color: Colors.black,
fontWeight: R.fontWeight.medium)),
);
}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment