Created screens

This commit is contained in:
2024-04-30 15:58:53 +03:00
parent 6ff2744c61
commit 7f0cef4b23
5 changed files with 166 additions and 133 deletions

3
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"editor.formatOnSave": true
}

BIN
assets/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -8,7 +8,7 @@ void main() {
runApp(const MyApp());
}
enum DemoScreen { counter, textField }
enum GymLinkScreen { mainPage, basketPage, historyPage }
class MyApp extends StatefulWidget {
const MyApp({super.key});
@@ -20,9 +20,8 @@ class MyApp extends StatefulWidget {
@js.JSExport()
class _MyAppState extends State<MyApp> {
final _streanController = StreamController<void>.broadcast();
DemoScreen _currentDemoScreen = DemoScreen.counter;
int _counterScreenCount = 0;
final _streamController = StreamController<void>.broadcast();
GymLinkScreen _currentGymLinkScreen = GymLinkScreen.mainPage;
bool _isLoading = true;
@override
@@ -35,39 +34,19 @@ class _MyAppState extends State<MyApp> {
@override
void dispose() {
_streanController.close();
_streamController.close();
super.dispose();
}
@js.JSExport()
void increment() {
if (_currentDemoScreen == DemoScreen.counter) {
setState(() {
_counterScreenCount++;
_streanController.add(null);
});
}
}
@js.JSExport()
void addHandler(void Function() handler) {
_streanController.stream.listen((event) {
handler();
});
}
@js.JSExport()
int get count => _counterScreenCount;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Aboba app',
title: 'GymLink Module',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
),
debugShowCheckedModeBanner: false,
home: demoScreenRouter(_currentDemoScreen),
home: gymLinkScreenRouter(_currentGymLinkScreen),
);
}
@@ -80,147 +59,196 @@ class _MyAppState extends State<MyApp> {
}
}
Widget demoScreenRouter(DemoScreen which) {
Widget gymLinkScreenRouter(GymLinkScreen which) {
switch (which) {
case DemoScreen.counter:
return CounterDemo(
case GymLinkScreen.mainPage:
return MainPage(
title: 'Counter',
numToDisplay: _counterScreenCount,
incrementHandler: increment,
isLoading: _isLoading);
case DemoScreen.textField:
return const TextFieldDemo(title: 'Nasdfs');
isLoading: _isLoading,
changeGymLinkScreenTo: changeGymLinkScreenTo);
case GymLinkScreen.basketPage:
return BasketPage(changeGymLinkScreenTo: changeGymLinkScreenTo);
case GymLinkScreen.historyPage:
return HistoryPage(changeGymLinkScreenTo: changeGymLinkScreenTo);
}
}
@js.JSExport()
void changeDemoScreenTo(String screenString) {
void changeGymLinkScreenTo(String screenString) {
setState(() {
switch (screenString) {
case 'counter':
_currentDemoScreen = DemoScreen.counter;
case 'main':
_currentGymLinkScreen = GymLinkScreen.mainPage;
break;
case 'textField':
_currentDemoScreen = DemoScreen.textField;
case 'basket':
_currentGymLinkScreen = GymLinkScreen.basketPage;
break;
case 'history':
_currentGymLinkScreen = GymLinkScreen.historyPage;
break;
}
});
}
}
class CounterDemo extends StatefulWidget {
class MainPage extends StatefulWidget {
final String title;
final int numToDisplay;
final VoidCallback incrementHandler;
final bool isLoading;
final void Function(String) changeGymLinkScreenTo;
const CounterDemo(
const MainPage(
{super.key,
required this.title,
required this.numToDisplay,
required this.incrementHandler,
required this.isLoading});
required this.isLoading,
required this.changeGymLinkScreenTo});
@override
State<CounterDemo> createState() => _CounterDemoState();
State<MainPage> createState() => _MainPageState();
}
class _CounterDemoState extends State<CounterDemo> {
class _MainPageState extends State<MainPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: widget.isLoading
? null
: AppBar(
title: Row(
children: [
Expanded(
child: TextField(
decoration: InputDecoration(
hintText: 'Search',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
suffixIcon: const Icon(
Icons.search,
color: Colors.blue,
),
),
appBar: widget.isLoading
? null
: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(right: 8),
child: Image.asset('logo.png', width: 24, height: 24),
),
),
const SizedBox(width: 8),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(0),
shape: const CircleBorder(
side: BorderSide(
color: Colors.blue,
width: 2,
),
),
Align(
alignment: Alignment.centerRight,
child: Text('Powered by GymLink',
style: Theme.of(context).textTheme.titleSmall),
),
child: const Icon(
Icons.shopping_basket,
color: Colors.white,
size: 36,
),
),
const SizedBox(width: 8),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(0),
shape: const CircleBorder(
side: BorderSide(
color: Colors.blue,
width: 2,
),
),
),
child: const Icon(
Icons.history,
color: Colors.white,
size: 36,
),
),
],
),
),
body: widget.isLoading
? const Center(child: CircularProgressIndicator())
: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
])),
body: widget.isLoading
? const Center(child: CircularProgressIndicator())
: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'Здесь будут товары',
),
],
),
),
);
Row(
children: [
Expanded(
child: TextField(
decoration: InputDecoration(
hintText: 'Search',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
suffixIcon: InkWell(
onTap: () {
debugPrint('tap on search icon');
},
child: const Icon(
Icons.search,
color: Colors.blue,
),
),
),
),
),
const SizedBox(width: 8),
ElevatedButton(
onPressed: () {
setState(() {
widget.changeGymLinkScreenTo('basket');
});
},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(0),
backgroundColor: Colors.blue,
shape: const CircleBorder(
side: BorderSide(
color: Colors.blue,
width: 2,
),
),
),
child: const Icon(
Icons.shopping_basket,
color: Colors.white,
size: 24,
),
),
const SizedBox(width: 8),
ElevatedButton(
onPressed: () {
setState(() {
widget.changeGymLinkScreenTo('history');
});
},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(0),
backgroundColor: Colors.blue,
shape: const CircleBorder(
side: BorderSide(
color: Colors.blue,
width: 2,
),
),
),
child: const Icon(
Icons.history,
color: Colors.white,
size: 24,
),
),
],
),
])
// : const Center(
// child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
// children: <Widget>[
// Text(
// 'Здесь будут товары',
// ),
// ],
// ),
// ),
);
}
}
class TextFieldDemo extends StatelessWidget {
const TextFieldDemo({super.key, required this.title});
final String title;
class BasketPage extends StatelessWidget {
final void Function(String) changeGymLinkScreenTo;
const BasketPage({super.key, required this.changeGymLinkScreenTo});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: const Center(
child: Padding(
padding: EdgeInsets.all(14.0),
child: TextField(
maxLines: null,
decoration: InputDecoration(border: OutlineInputBorder()),
appBar: AppBar(
leading: IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () => changeGymLinkScreenTo('main'),
),
title: const Text('Корзина'),
),
),
);
body: const Center(
child: Text('Корзина'),
));
}
}
class HistoryPage extends StatelessWidget {
final void Function(String) changeGymLinkScreenTo;
const HistoryPage({super.key, required this.changeGymLinkScreenTo});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () => changeGymLinkScreenTo('main'),
),
title: const Text('История заказов'),
),
body: const Center(
child: Text('История заказов'),
));
}
}

View File

@@ -57,6 +57,8 @@ flutter:
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
assets:
- assets/logo.png
# To add assets to your application, add an assets section, like this:
# assets:

View File

@@ -1,7 +1,7 @@
#flutter_target {
border: 1px solid #aaa;
width: 320px;
height: 480px;
width: 480px;
height: 600px;
border-radius: 0px;
transition: all 150ms ease-in;
align-self: center;