From 593e8b60c8d5511fa5217e6e4dfd728e9f41ec1e Mon Sep 17 00:00:00 2001 From: Shaki Sun Date: Mon, 20 May 2024 16:03:14 +0500 Subject: [PATCH 1/8] initial UI for mobile --- lib/Providers/args_provider.dart | 23 + lib/Providers/kwargs_provider.dart | 17 + lib/constants/my_constant.dart | 18 + lib/main.dart | 131 +----- lib/responsive/responsive_layout.dart | 25 ++ lib/screens/desktop/desktop_home.dart | 12 + lib/screens/mobile/mobile_home.dart | 581 ++++++++++++++++++++++++++ lib/screens/tablet/tablet_home.dart | 581 ++++++++++++++++++++++++++ lib/utils/args_screen.dart | 55 +++ lib/utils/kwargs_screen.dart | 126 ++++++ pubspec.yaml | 4 + 11 files changed, 1464 insertions(+), 109 deletions(-) create mode 100644 lib/Providers/args_provider.dart create mode 100644 lib/Providers/kwargs_provider.dart create mode 100644 lib/constants/my_constant.dart create mode 100644 lib/responsive/responsive_layout.dart create mode 100644 lib/screens/desktop/desktop_home.dart create mode 100644 lib/screens/mobile/mobile_home.dart create mode 100644 lib/screens/tablet/tablet_home.dart create mode 100644 lib/utils/args_screen.dart create mode 100644 lib/utils/kwargs_screen.dart diff --git a/lib/Providers/args_provider.dart b/lib/Providers/args_provider.dart new file mode 100644 index 0000000..e3b84e5 --- /dev/null +++ b/lib/Providers/args_provider.dart @@ -0,0 +1,23 @@ +import "package:flutter/material.dart"; + +class ArgsProvider extends ChangeNotifier { + List controllers = [TextEditingController()]; + + void addController() { + controllers.add(TextEditingController()); + notifyListeners(); + } + + void removeController(int index) { + controllers.removeAt(index); + notifyListeners(); + } + + @override + void dispose() { + for (final controller in controllers) { + controller.dispose(); + } + super.dispose(); + } +} diff --git a/lib/Providers/kwargs_provider.dart b/lib/Providers/kwargs_provider.dart new file mode 100644 index 0000000..af69744 --- /dev/null +++ b/lib/Providers/kwargs_provider.dart @@ -0,0 +1,17 @@ +import "package:flutter/cupertino.dart"; + +class TableDataProvider extends ChangeNotifier { + final List> _tableData = [{"key": "", "value": ""}]; + + List> get tableData => _tableData; + + void addRow(Map rowData) { + _tableData.add(rowData); + notifyListeners(); + } + + void removeRow(int index) { + _tableData.removeAt(index); + notifyListeners(); + } +} diff --git a/lib/constants/my_constant.dart b/lib/constants/my_constant.dart new file mode 100644 index 0000000..19f449c --- /dev/null +++ b/lib/constants/my_constant.dart @@ -0,0 +1,18 @@ +import "package:flutter/material.dart"; + +/// Colors /// +Color homeAppBarBackgroundColor = Colors.white; +Color homeAppBarTextColor = Colors.black; +Color blackColor = Colors.black; +Color dropDownTextColor = Colors.green; +Color blueAccentColor = Colors.blueAccent; +Color whiteColor = Colors.white; +Color closeIconColor = Colors.redAccent; + + + + +/// Icon Size /// +const double iconSize = 15; +const double largeIconSize = 20; +const double horizontalPadding = 10; diff --git a/lib/main.dart b/lib/main.dart index e2632f6..c264c96 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,4 +1,13 @@ import "package:flutter/material.dart"; +import "package:provider/provider.dart"; +import "package:xconn_ui/Providers/args_provider.dart"; +import "package:xconn_ui/Providers/kwargs_provider.dart"; +import "package:xconn_ui/responsive/responsive_layout.dart"; +import "package:xconn_ui/screens/desktop/desktop_home.dart"; +import "package:xconn_ui/screens/mobile/mobile_home.dart"; +import "package:xconn_ui/screens/tablet/tablet_home.dart"; + + void main() { runApp(const MyApp()); @@ -7,119 +16,23 @@ void main() { class MyApp extends StatelessWidget { const MyApp({super.key}); - // This widget is the root of your application. @override Widget build(BuildContext context) { - return MaterialApp( - title: "Flutter Demo", - theme: ThemeData( - // This is the theme of your application. - // - // TRY THIS: Try running your application with "flutter run". You'll see - // the application has a purple toolbar. Then, without quitting the app, - // try changing the seedColor in the colorScheme below to Colors.green - // and then invoke "hot reload" (save your changes or press the "hot - // reload" button in a Flutter-supported IDE, or press "r" if you used - // the command line to start the app). - // - // Notice that the counter didn't reset back to zero; the application - // state is not lost during the reload. To reset the state, use hot - // restart instead. - // - // This works for code too, not just values: Most code changes can be - // tested with just a hot reload. - colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), - useMaterial3: true, - ), - home: const MyHomePage(title: "Flutter Demo Home Page"), - ); - } -} - -class MyHomePage extends StatefulWidget { - const MyHomePage({required String title, super.key}) : _title = title; - - // This widget is the home page of your application. It is stateful, meaning - // that it has a State object (defined below) that contains fields that affect - // how it looks. - - // This class is the configuration for the state. It holds the values (in this - // case the title) provided by the parent (in this case the App widget) and - // used by the build method of the State. Fields in a Widget subclass are - // always marked "final". - - final String _title; - - @override - State createState() => _MyHomePageState(); -} - -class _MyHomePageState extends State { - int _counter = 0; - - void _incrementCounter() { - setState(() { - // This call to setState tells the Flutter framework that something has - // changed in this State, which causes it to rerun the build method below - // so that the display can reflect the updated values. If we changed - // _counter without calling setState(), then the build method would not be - // called again, and so nothing would appear to happen. - _counter++; - }); - } - - @override - Widget build(BuildContext context) { - // This method is rerun every time setState is called, for instance as done - // by the _incrementCounter method above. - // - // The Flutter framework has been optimized to make rerunning build methods - // fast, so that you can just rebuild anything that needs updating rather - // than having to individually change instances of widgets. - return Scaffold( - appBar: AppBar( - // TRY THIS: Try changing the color here to a specific color (to - // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar - // change color while the other colors stay the same. - backgroundColor: Theme.of(context).colorScheme.inversePrimary, - // Here we take the value from the MyHomePage object that was created by - // the App.build method, and use it to set our appbar title. - title: Text(widget._title), - ), - body: Center( - // Center is a layout widget. It takes a single child and positions it - // in the middle of the parent. - child: Column( - // Column is also a layout widget. It takes a list of children and - // arranges them vertically. By default, it sizes itself to fit its - // children horizontally, and tries to be as tall as its parent. - // - // Column has various properties to control how it sizes itself and - // how it positions its children. Here we use mainAxisAlignment to - // center the children vertically; the main axis here is the vertical - // axis because Columns are vertical (the cross axis would be - // horizontal). - // - // TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint" - // action in the IDE, or press "p" in the console), to see the - // wireframe for each widget. - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const Text( - "You have pushed the button this many times:", - ), - Text( - "$_counter", - style: Theme.of(context).textTheme.headlineMedium, - ), - ], + return MultiProvider(providers: [ + ChangeNotifierProvider(create: (context) => ArgsProvider()), + ChangeNotifierProvider(create: (context) => TableDataProvider()), + ], + child: MaterialApp( + debugShowCheckedModeBanner: false, + theme: ThemeData( + useMaterial3: true, + ), + home: ResponsiveLayout( + mobileScaffold: const MobileHomeScaffold(), + tabletScaffold: const TabletHomeScaffold(), + desktopScaffold: const DesktopHomeScaffold(), ), ), - floatingActionButton: FloatingActionButton( - onPressed: _incrementCounter, - tooltip: "Increment", - child: const Icon(Icons.add), - ), // This trailing comma makes auto-formatting nicer for build methods. ); } } diff --git a/lib/responsive/responsive_layout.dart b/lib/responsive/responsive_layout.dart new file mode 100644 index 0000000..1d16c4f --- /dev/null +++ b/lib/responsive/responsive_layout.dart @@ -0,0 +1,25 @@ +import "package:flutter/material.dart"; + +class ResponsiveLayout extends StatelessWidget { + + ResponsiveLayout( + {required this.mobileScaffold, required this.tabletScaffold, required this.desktopScaffold, super.key,}); + Widget mobileScaffold; + Widget tabletScaffold; + Widget desktopScaffold; + + @override + Widget build(BuildContext context) { + return LayoutBuilder( + builder: (context, constraints){ + if(constraints.maxWidth < 500){ + return mobileScaffold; + }else if(constraints.maxWidth < 1100){ + return tabletScaffold; + }else{ + return desktopScaffold; + } + }, + ); + } +} diff --git a/lib/screens/desktop/desktop_home.dart b/lib/screens/desktop/desktop_home.dart new file mode 100644 index 0000000..9ed8464 --- /dev/null +++ b/lib/screens/desktop/desktop_home.dart @@ -0,0 +1,12 @@ +import "package:flutter/material.dart"; + +class DesktopHomeScaffold extends StatelessWidget { + const DesktopHomeScaffold({super.key}); + + @override + Widget build(BuildContext context) { + return const Scaffold( + backgroundColor: Colors.greenAccent, + ); + } +} diff --git a/lib/screens/mobile/mobile_home.dart b/lib/screens/mobile/mobile_home.dart new file mode 100644 index 0000000..18cafbf --- /dev/null +++ b/lib/screens/mobile/mobile_home.dart @@ -0,0 +1,581 @@ +import "package:flutter/material.dart"; +import "package:provider/provider.dart"; +import "package:xconn_ui/Providers/args_provider.dart"; +import "package:xconn_ui/Providers/kwargs_provider.dart"; +import "package:xconn_ui/constants/my_constant.dart"; +import "package:xconn_ui/utils/args_screen.dart"; +import "package:xconn_ui/utils/kwargs_screen.dart"; + +class TabData { + String selectedValue = ""; + String selectedSerializer = ""; + String sendButtonText = "Send"; +} + +class MobileHomeScaffold extends StatefulWidget { + const MobileHomeScaffold({super.key}); + + @override + State createState() => _MobileHomeScaffoldState(); +} + +class _MobileHomeScaffoldState extends State with TickerProviderStateMixin { + late TabController _tabController; + final List _tabNames = ["Tab 1"]; + final List _tabContents = ["Content for Tab 1"]; + final List _tabData = [TabData()]; + + @override + void initState() { + super.initState(); + _tabController = TabController(length: _tabNames.length, vsync: this); + _tabController.addListener(_handleTabSelection); + } + + + // TODO HANDLE TABS SELECTION + void _handleTabSelection(){ + setState(() {}); + } + + void _addTab() { + setState(() { + int newIndex = _tabNames.length + 1; + _tabNames.add("Tab $newIndex"); + _tabContents.add("Content for Tab $newIndex"); + _tabData.add(TabData()); + _tabController = TabController(length: _tabNames.length, vsync: this); + _tabController.addListener(_handleTabSelection); + }); + } + + void _removeTab(int index) { + setState(() { + _tabNames.removeAt(index); + _tabContents.removeAt(index); + _tabData.removeAt(index); + _tabController = TabController(length: _tabNames.length, vsync: this); + _tabController.addListener(_handleTabSelection); + }); + } + + @override + void dispose() { + _tabController..removeListener(_handleTabSelection) + ..dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text( + "XConn", + style: TextStyle(color: homeAppBarTextColor, fontSize: 15), + ), + actions: [ + Padding( + padding: const EdgeInsets.only(right: 15), + child: IconButton( + onPressed: _addTab, + icon: const Icon(Icons.add_box_sharp), + ), + ), + ], + bottom: _tabNames.isNotEmpty + ? PreferredSize( + preferredSize: const Size.fromHeight(kToolbarHeight), + child: TabBar( + controller: _tabController, + isScrollable: true, + indicatorColor: blueAccentColor, + indicatorWeight: 1, + tabs: _tabNames + .asMap() + .entries + .map((entry) => + _buildTabWithDeleteButton(entry.key, entry.value),) + .toList(), + ), + ) + : null, + ), + drawer: const Drawer(), + body: _tabNames.isNotEmpty + ? Padding( + padding: const EdgeInsets.only(top: 10), + child: TabBarView( + physics: const NeverScrollableScrollPhysics(), + controller: _tabController, + children: _tabContents + .asMap() + .entries + .map((entry) => _buildTab(entry.key)) + .toList(), + ), + ) + : const Center(child: Text("No Tabs")), + ); + } + + Widget _buildTabWithDeleteButton(int index, String tabName) { + final isSelected = _tabController.index == index; + return GestureDetector( + onTap: () { + _tabController.animateTo(index); + }, + child: Container( + margin: const EdgeInsets.symmetric(horizontal: 8), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + tabName, + style: TextStyle( + color: isSelected ? blueAccentColor : blackColor, + fontWeight: isSelected ? FontWeight.bold : FontWeight.normal, + ), + ), + IconButton( + icon: Icon( + Icons.close, + color: closeIconColor, + size: iconSize, + ), + onPressed: () => _removeTab(index), + ), + ], + ), + ), + ); + } + + Widget _buildTab(int index) { + return SingleChildScrollView( + physics: const BouncingScrollPhysics(), + child: Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: Container( + padding: const EdgeInsets.symmetric(horizontal: 15), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8), + border: Border.all(color: Colors.grey), + ), + child: Row( + children: [ + SizedBox( + width: 100, + child: DropdownButton( + value: _tabData[index].selectedValue.isEmpty + ? null + : _tabData[index].selectedValue, + hint: Text("Actions", style: TextStyle(color: dropDownTextColor),), + items: [ + "Register", + "Subscribe", + "Call", + "Publish", + ].map((String value) { + return DropdownMenuItem( + value: value, + child: Text(value, style: TextStyle(color: dropDownTextColor),), + ); + }).toList(), + onChanged: (String? newValue) { + setState(() { + _tabData[index].selectedValue = newValue!; + if (newValue == "Subscribe") { + _tabData[index].sendButtonText = "Subscribe"; + } else if (newValue == "Register") { + _tabData[index].sendButtonText = "Register"; + } else if (newValue == "Call") { + _tabData[index].sendButtonText = "Call"; + } else if (newValue == "Publish") { + _tabData[index].sendButtonText = "Publish"; + } else { + _tabData[index].sendButtonText = "Send"; + } + }); + }, + ), + ), + Container( + height: 30, + width: 1, + color: Colors.grey, + ), + Expanded( + child: TextFormField( + decoration: const InputDecoration( + hintText: "Enter URL or paste text", + labelText: "Enter URL or paste text", + border: InputBorder.none, + contentPadding: EdgeInsets.all(10), + ), + ), + ), + ], + ), + ), + ), + const SizedBox( + height: 20, + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: Row( + children: [ + Container( + padding: const EdgeInsets.symmetric( + horizontal: 10, + ), + decoration: BoxDecoration( + border: Border.all(color: Colors.grey), + borderRadius: BorderRadius.circular(8), + ), + child: DropdownButton( + value: _tabData[index].selectedSerializer.isEmpty + ? null + : _tabData[index].selectedSerializer, + hint: const Text("Serializers"), + items: [ + "JSON", + "CBOR", + "Msg Pack", + ].map((String value) { + return DropdownMenuItem( + value: value, + child: Text(value), + ); + }).toList(), + onChanged: (String? newValue) { + setState(() { + _tabData[index].selectedSerializer = newValue!; + }); + }, + ), + ), + const SizedBox( + width: 10, + ), + Expanded( + child: TextFormField( + decoration: InputDecoration( + hintText: "Enter realm here", + labelText: "Enter realm here", + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), + ), + contentPadding: const EdgeInsets.all(10), + ), + ), + ), + ], + ), + ), + const SizedBox( + height: 20, + ), + if (_tabData[index].sendButtonText == "Publish") ...[ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: TextFormField( + decoration: InputDecoration( + hintText: "Enter topic here", + labelText: "Enter topic here", + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), + ), + contentPadding: const EdgeInsets.all(10), + ), + ), + ), + ] else if (_tabData[index].sendButtonText == "Call") ...[ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: TextFormField( + decoration: InputDecoration( + hintText: "Enter procedure here", + labelText: "Enter procedure here", + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), + ), + contentPadding: const EdgeInsets.all(10), + ), + ), + ), + ] else if (_tabData[index].sendButtonText == "Register") ...[ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: TextFormField( + decoration: InputDecoration( + hintText: "Enter procedure here", + labelText: "Enter procedure here", + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), + ), + contentPadding: const EdgeInsets.all(10), + ), + ), + ), + ] else if (_tabData[index].sendButtonText == "Subscribe") ...[ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: TextFormField( + decoration: InputDecoration( + hintText: "Enter topic here", + labelText: "Enter topic here", + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), + ), + contentPadding: const EdgeInsets.all(10), + ), + ), + ), + ] else ...[ + Container(), + ], + const SizedBox( + height: 20, + ), + if (_tabData[index].sendButtonText == "Publish") ...[ + Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15, + ), + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const Padding( + padding: EdgeInsets.only(left: 10), + child: Align( + alignment: Alignment.topLeft, + child: Text( + "Args", + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + color: Colors.black, + ), + ), + ), + ), + IconButton( + onPressed: () { + Provider.of( + context, + listen: false, + ).addController(); + }, + icon: const Icon( + Icons.add_box_sharp, + size: 24, + ), + ), + ], + ), + ], + ), + ), + const ArgsTextFormFields(), + ], + ), + ] else if (_tabData[index].sendButtonText == "Call") ...[ + Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15, + ), + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const Padding( + padding: EdgeInsets.only(left: 10), + child: Align( + alignment: Alignment.topLeft, + child: Text( + "Args", + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + color: Colors.black, + ), + ), + ), + ), + IconButton( + onPressed: () { + Provider.of( + context, + listen: false, + ).addController(); + }, + icon: const Icon( + Icons.add_box_sharp, + size: 24, + ), + ), + ], + ), + ], + ), + ), + const ArgsTextFormFields(), + ], + ), + ], + const SizedBox( + height: 20, + ), + if (_tabData[index].sendButtonText == "Publish") ...[ + Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const Padding( + padding: EdgeInsets.only(left: 10), + child: Align( + alignment: Alignment.topLeft, + child: Text( + "Kwargs", + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + color: Colors.black, + ), + ), + ), + ), + IconButton( + onPressed: () { + Provider.of( + context, + listen: false, + ).addRow({ + "key": "", + "value": "", + }); + }, + icon: const Icon( + Icons.add_box_sharp, + size: 24, + ), + ), + ], + ), + ), + const DynamicKeyValuePairs(), + ], + ), + ] else if (_tabData[index].sendButtonText == "Call") ...[ + Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const Padding( + padding: EdgeInsets.only(left: 10), + child: Align( + alignment: Alignment.topLeft, + child: Text( + "Kwargs", + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + color: Colors.black, + ), + ), + ), + ), + IconButton( + onPressed: () { + Provider.of( + context, + listen: false, + ).addRow({ + "key": "", + "value": "", + }); + }, + icon: const Icon( + Icons.add_box_sharp, + size: 24, + ), + ), + ], + ), + ), + const DynamicKeyValuePairs(), + ], + ), + ] else ...[ + Container(), + ], + const SizedBox(height: 20), + Padding( + padding: const EdgeInsets.only(left: 25), + child: Align( + alignment: Alignment.topLeft, + child: SizedBox( + height: 100, + width: MediaQuery.of(context).size.width, + child: Text( + "Result", + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + color: blackColor, + ), + ), + ), + ), + ), + const SizedBox( + height: 50, + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 110), + child: MaterialButton( + onPressed: () {}, + color: Colors.blueAccent, + minWidth: 200, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8), + ), + child: Text( + _tabData[index].sendButtonText, + style: TextStyle( + color: whiteColor, + fontSize: 16, + fontWeight: FontWeight.w600, + ), + ), + ), + ), + const SizedBox( + height: 40, + ), + ], + ), + ); + } +} diff --git a/lib/screens/tablet/tablet_home.dart b/lib/screens/tablet/tablet_home.dart new file mode 100644 index 0000000..efe9d14 --- /dev/null +++ b/lib/screens/tablet/tablet_home.dart @@ -0,0 +1,581 @@ +import "package:flutter/material.dart"; +import "package:provider/provider.dart"; +import "package:xconn_ui/Providers/args_provider.dart"; +import "package:xconn_ui/Providers/kwargs_provider.dart"; +import "package:xconn_ui/constants/my_constant.dart"; +import "package:xconn_ui/utils/args_screen.dart"; +import "package:xconn_ui/utils/kwargs_screen.dart"; + +class TabData { + String selectedValue = ""; + String selectedSerializer = ""; + String sendButtonText = "Send"; +} + +class TabletHomeScaffold extends StatefulWidget { + const TabletHomeScaffold({super.key}); + + @override + State createState() => _TabletHomeScaffoldState(); +} + +class _TabletHomeScaffoldState extends State with TickerProviderStateMixin { + late TabController _tabController; + final List _tabNames = ["Tab 1"]; + final List _tabContents = ["Content for Tab 1"]; + final List _tabData = [TabData()]; + + @override + void initState() { + super.initState(); + _tabController = TabController(length: _tabNames.length, vsync: this); + _tabController.addListener(_handleTabSelection); + } + + + // TODO HANDLE TABS SELECTION + void _handleTabSelection(){ + setState(() {}); + } + + void _addTab() { + setState(() { + int newIndex = _tabNames.length + 1; + _tabNames.add("Tab $newIndex"); + _tabContents.add("Content for Tab $newIndex"); + _tabData.add(TabData()); + _tabController = TabController(length: _tabNames.length, vsync: this); + _tabController.addListener(_handleTabSelection); + }); + } + + void _removeTab(int index) { + setState(() { + _tabNames.removeAt(index); + _tabContents.removeAt(index); + _tabData.removeAt(index); + _tabController = TabController(length: _tabNames.length, vsync: this); + _tabController.addListener(_handleTabSelection); + }); + } + + @override + void dispose() { + _tabController..removeListener(_handleTabSelection) + ..dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text( + "XConn", + style: TextStyle(color: homeAppBarTextColor, fontSize: 15), + ), + actions: [ + Padding( + padding: const EdgeInsets.only(right: 15), + child: IconButton( + onPressed: _addTab, + icon: const Icon(Icons.add_box_sharp), + ), + ), + ], + bottom: _tabNames.isNotEmpty + ? PreferredSize( + preferredSize: const Size.fromHeight(kToolbarHeight), + child: TabBar( + controller: _tabController, + isScrollable: true, + indicatorColor: blueAccentColor, + indicatorWeight: 1, + tabs: _tabNames + .asMap() + .entries + .map((entry) => + _buildTabWithDeleteButton(entry.key, entry.value),) + .toList(), + ), + ) + : null, + ), + drawer: const Drawer(), + body: _tabNames.isNotEmpty + ? Padding( + padding: const EdgeInsets.only(top: 10), + child: TabBarView( + physics: const NeverScrollableScrollPhysics(), + controller: _tabController, + children: _tabContents + .asMap() + .entries + .map((entry) => _buildTab(entry.key)) + .toList(), + ), + ) + : const Center(child: Text("No Tabs")), + ); + } + + Widget _buildTabWithDeleteButton(int index, String tabName) { + final isSelected = _tabController.index == index; + return GestureDetector( + onTap: () { + _tabController.animateTo(index); + }, + child: Container( + margin: const EdgeInsets.symmetric(horizontal: 8), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + tabName, + style: TextStyle( + color: isSelected ? blueAccentColor : blackColor, + fontWeight: isSelected ? FontWeight.bold : FontWeight.normal, + ), + ), + IconButton( + icon: Icon( + Icons.close, + color: closeIconColor, + size: iconSize, + ), + onPressed: () => _removeTab(index), + ), + ], + ), + ), + ); + } + + Widget _buildTab(int index) { + return SingleChildScrollView( + physics: const BouncingScrollPhysics(), + child: Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: Container( + padding: const EdgeInsets.symmetric(horizontal: 15), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8), + border: Border.all(color: Colors.grey), + ), + child: Row( + children: [ + SizedBox( + width: 100, + child: DropdownButton( + value: _tabData[index].selectedValue.isEmpty + ? null + : _tabData[index].selectedValue, + hint: Text("Actions", style: TextStyle(color: dropDownTextColor),), + items: [ + "Register", + "Subscribe", + "Call", + "Publish", + ].map((String value) { + return DropdownMenuItem( + value: value, + child: Text(value, style: TextStyle(color: dropDownTextColor),), + ); + }).toList(), + onChanged: (String? newValue) { + setState(() { + _tabData[index].selectedValue = newValue!; + if (newValue == "Subscribe") { + _tabData[index].sendButtonText = "Subscribe"; + } else if (newValue == "Register") { + _tabData[index].sendButtonText = "Register"; + } else if (newValue == "Call") { + _tabData[index].sendButtonText = "Call"; + } else if (newValue == "Publish") { + _tabData[index].sendButtonText = "Publish"; + } else { + _tabData[index].sendButtonText = "Send"; + } + }); + }, + ), + ), + Container( + height: 30, + width: 1, + color: Colors.grey, + ), + Expanded( + child: TextFormField( + decoration: const InputDecoration( + hintText: "Enter URL or paste text", + labelText: "Enter URL or paste text", + border: InputBorder.none, + contentPadding: EdgeInsets.all(10), + ), + ), + ), + ], + ), + ), + ), + const SizedBox( + height: 20, + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: Row( + children: [ + Container( + padding: const EdgeInsets.symmetric( + horizontal: 10, + ), + decoration: BoxDecoration( + border: Border.all(color: Colors.grey), + borderRadius: BorderRadius.circular(8), + ), + child: DropdownButton( + value: _tabData[index].selectedSerializer.isEmpty + ? null + : _tabData[index].selectedSerializer, + hint: const Text("Serializers"), + items: [ + "JSON", + "CBOR", + "Msg Pack", + ].map((String value) { + return DropdownMenuItem( + value: value, + child: Text(value), + ); + }).toList(), + onChanged: (String? newValue) { + setState(() { + _tabData[index].selectedSerializer = newValue!; + }); + }, + ), + ), + const SizedBox( + width: 10, + ), + Expanded( + child: TextFormField( + decoration: InputDecoration( + hintText: "Enter realm here", + labelText: "Enter realm here", + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), + ), + contentPadding: const EdgeInsets.all(10), + ), + ), + ), + ], + ), + ), + const SizedBox( + height: 20, + ), + if (_tabData[index].sendButtonText == "Publish") ...[ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: TextFormField( + decoration: InputDecoration( + hintText: "Enter topic here", + labelText: "Enter topic here", + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), + ), + contentPadding: const EdgeInsets.all(10), + ), + ), + ), + ] else if (_tabData[index].sendButtonText == "Call") ...[ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: TextFormField( + decoration: InputDecoration( + hintText: "Enter procedure here", + labelText: "Enter procedure here", + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), + ), + contentPadding: const EdgeInsets.all(10), + ), + ), + ), + ] else if (_tabData[index].sendButtonText == "Register") ...[ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: TextFormField( + decoration: InputDecoration( + hintText: "Enter procedure here", + labelText: "Enter procedure here", + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), + ), + contentPadding: const EdgeInsets.all(10), + ), + ), + ), + ] else if (_tabData[index].sendButtonText == "Subscribe") ...[ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: TextFormField( + decoration: InputDecoration( + hintText: "Enter topic here", + labelText: "Enter topic here", + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), + ), + contentPadding: const EdgeInsets.all(10), + ), + ), + ), + ] else ...[ + Container(), + ], + const SizedBox( + height: 20, + ), + if (_tabData[index].sendButtonText == "Publish") ...[ + Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15, + ), + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const Padding( + padding: EdgeInsets.only(left: 10), + child: Align( + alignment: Alignment.topLeft, + child: Text( + "Args", + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + color: Colors.black, + ), + ), + ), + ), + IconButton( + onPressed: () { + Provider.of( + context, + listen: false, + ).addController(); + }, + icon: const Icon( + Icons.add_box_sharp, + size: 24, + ), + ), + ], + ), + ], + ), + ), + const ArgsTextFormFields(), + ], + ), + ] else if (_tabData[index].sendButtonText == "Call") ...[ + Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15, + ), + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const Padding( + padding: EdgeInsets.only(left: 10), + child: Align( + alignment: Alignment.topLeft, + child: Text( + "Args", + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + color: Colors.black, + ), + ), + ), + ), + IconButton( + onPressed: () { + Provider.of( + context, + listen: false, + ).addController(); + }, + icon: const Icon( + Icons.add_box_sharp, + size: 24, + ), + ), + ], + ), + ], + ), + ), + const ArgsTextFormFields(), + ], + ), + ], + const SizedBox( + height: 20, + ), + if (_tabData[index].sendButtonText == "Publish") ...[ + Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const Padding( + padding: EdgeInsets.only(left: 10), + child: Align( + alignment: Alignment.topLeft, + child: Text( + "Kwargs", + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + color: Colors.black, + ), + ), + ), + ), + IconButton( + onPressed: () { + Provider.of( + context, + listen: false, + ).addRow({ + "key": "", + "value": "", + }); + }, + icon: const Icon( + Icons.add_box_sharp, + size: 24, + ), + ), + ], + ), + ), + const DynamicKeyValuePairs(), + ], + ), + ] else if (_tabData[index].sendButtonText == "Call") ...[ + Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const Padding( + padding: EdgeInsets.only(left: 10), + child: Align( + alignment: Alignment.topLeft, + child: Text( + "Kwargs", + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + color: Colors.black, + ), + ), + ), + ), + IconButton( + onPressed: () { + Provider.of( + context, + listen: false, + ).addRow({ + "key": "", + "value": "", + }); + }, + icon: const Icon( + Icons.add_box_sharp, + size: 24, + ), + ), + ], + ), + ), + const DynamicKeyValuePairs(), + ], + ), + ] else ...[ + Container(), + ], + const SizedBox(height: 20), + Padding( + padding: const EdgeInsets.only(left: 25), + child: Align( + alignment: Alignment.topLeft, + child: SizedBox( + height: 100, + width: MediaQuery.of(context).size.width, + child: Text( + "Result", + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + color: blackColor, + ), + ), + ), + ), + ), + const SizedBox( + height: 50, + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 110), + child: MaterialButton( + onPressed: () {}, + color: Colors.blueAccent, + minWidth: 200, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8), + ), + child: Text( + _tabData[index].sendButtonText, + style: TextStyle( + color: whiteColor, + fontSize: 16, + fontWeight: FontWeight.w600, + ), + ), + ), + ), + const SizedBox( + height: 40, + ), + ], + ), + ); + } +} diff --git a/lib/utils/args_screen.dart b/lib/utils/args_screen.dart new file mode 100644 index 0000000..56832c6 --- /dev/null +++ b/lib/utils/args_screen.dart @@ -0,0 +1,55 @@ +import "package:flutter/material.dart"; +import "package:provider/provider.dart"; +import "package:xconn_ui/Providers/args_provider.dart"; +import "package:xconn_ui/constants/my_constant.dart"; + + + +class ArgsTextFormFields extends StatelessWidget { + const ArgsTextFormFields({super.key}); + + @override + Widget build(BuildContext context) { + return Consumer( + builder: (context, model, _) { + return SizedBox( + height: 120, + child: ListView.builder( + shrinkWrap: true, + itemCount: model.controllers.length, + itemBuilder: (context, index) { + return ListTile( + title: SizedBox( + height: 45, + child: TextFormField( + controller: model.controllers[index], + decoration: InputDecoration( + labelText: "Enter args here", + labelStyle: TextStyle(color: blackColor), + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), + ), + focusedBorder: OutlineInputBorder( + borderSide: BorderSide(color: blackColor), + borderRadius: BorderRadius.circular(8), + ), + enabledBorder: OutlineInputBorder( + borderSide: const BorderSide(color: Colors.grey), + borderRadius: BorderRadius.circular(8), + ), + ), + ), + ), + trailing: InkWell( + hoverColor: Colors.blue.shade200, + onTap: () => model.removeController(index), + child: Icon(Icons.delete, color: closeIconColor,),), + + ); + }, + ), + ); + }, + ); + } +} diff --git a/lib/utils/kwargs_screen.dart b/lib/utils/kwargs_screen.dart new file mode 100644 index 0000000..7bbf50f --- /dev/null +++ b/lib/utils/kwargs_screen.dart @@ -0,0 +1,126 @@ +import "package:flutter/foundation.dart"; +import "package:flutter/material.dart"; +import "package:provider/provider.dart"; +import "package:xconn_ui/Providers/kwargs_provider.dart"; +import "package:xconn_ui/constants/my_constant.dart"; + + +class DynamicKeyValuePairs extends StatelessWidget { + const DynamicKeyValuePairs({super.key}); + + @override + Widget build(BuildContext context) { + return Consumer( + builder: (context, tableProvider, _) { + return SizedBox( + height: 200, + child: SingleChildScrollView( + child: TableWidget(tableProvider.tableData), + ), + ); + }, + ); + } +} + +class TableWidget extends StatefulWidget { + const TableWidget(this.tableData, {super.key}); + final List> tableData; + + @override + State createState() => _TableWidgetState(); + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties.add(IterableProperty>("tableData", tableData)); + } +} + +class _TableWidgetState extends State { + TableRow _buildTableRow( + Map rowData, int index, TableDataProvider tableProvider,) { + return TableRow( + children: [ + _buildTableCell( + TextFormField( + initialValue: rowData["key"], + onChanged: (newValue) { + setState(() { + rowData["key"] = newValue; + }); + }, + decoration: const InputDecoration( + border: InputBorder.none, + contentPadding: EdgeInsets.all(8), + ), + ), + ), + _buildTableCell( + TextFormField( + initialValue: rowData["value"], + onChanged: (newValue) { + setState(() { + rowData["value"] = newValue; + }); + }, + decoration: const InputDecoration( + border: InputBorder.none, + contentPadding: EdgeInsets.all(8), + ), + ), + ), + _buildTableCell( + IconButton( + icon: Icon(Icons.delete, color: closeIconColor,), + onPressed: () { + setState(() { + tableProvider.removeRow(index); + }); + }, + ), + ), + ], + ); + } + + TableCell _buildTableCell(Widget child) { + return TableCell( + child: Container( + // padding: const EdgeInsets.all(8), + alignment: Alignment.center, + height: 50, + child: child, + ), + ); + } + + @override + Widget build(BuildContext context) { + return Table( + border: TableBorder.all(color: Colors.grey), + columnWidths: const { + 0: FixedColumnWidth(150), // Width for Key column + 1: FixedColumnWidth(150), // Width for Value column + 2: FixedColumnWidth(50), // Width for Actions column + }, + children: [ + TableRow( + decoration: BoxDecoration( + color: Colors.grey[300], + ), + children: [ + _buildTableCell(const Text("Key", + style: TextStyle(fontWeight: FontWeight.bold),),), + _buildTableCell(const Text("Value", + style: TextStyle(fontWeight: FontWeight.bold),),), + _buildTableCell(const Text("", + style: TextStyle(fontWeight: FontWeight.bold),),), + ], + ), + ...widget.tableData.asMap().entries.map((entry) => _buildTableRow( + entry.value, entry.key, Provider.of(context),),), + ], + ); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index 78aa2ce..f165452 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -31,9 +31,13 @@ dependencies: # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.6 + dynamic_tabbar: ^1.0.7 flutter: sdk: flutter + provider: ^6.1.2 + wampproto: ^0.1.0 + xconn: ^0.1.0 dev_dependencies: # The "flutter_lints" package below contains a set of recommended lints to From 76b6cd1cc0e33005a397ae523bf6c123954ccc63 Mon Sep 17 00:00:00 2001 From: Shaki Sun Date: Mon, 20 May 2024 16:07:35 +0500 Subject: [PATCH 2/8] fix code format --- lib/Providers/kwargs_provider.dart | 4 +- lib/constants/my_constant.dart | 3 -- lib/main.dart | 19 ++++--- lib/responsive/responsive_layout.dart | 23 +++++---- lib/screens/mobile/mobile_home.dart | 71 +++++++++++++-------------- lib/screens/tablet/tablet_home.dart | 71 +++++++++++++-------------- lib/utils/args_screen.dart | 9 ++-- lib/utils/kwargs_screen.dart | 44 ++++++++++++----- 8 files changed, 133 insertions(+), 111 deletions(-) diff --git a/lib/Providers/kwargs_provider.dart b/lib/Providers/kwargs_provider.dart index af69744..ac1afac 100644 --- a/lib/Providers/kwargs_provider.dart +++ b/lib/Providers/kwargs_provider.dart @@ -1,7 +1,9 @@ import "package:flutter/cupertino.dart"; class TableDataProvider extends ChangeNotifier { - final List> _tableData = [{"key": "", "value": ""}]; + final List> _tableData = [ + {"key": "", "value": ""} + ]; List> get tableData => _tableData; diff --git a/lib/constants/my_constant.dart b/lib/constants/my_constant.dart index 19f449c..15fe118 100644 --- a/lib/constants/my_constant.dart +++ b/lib/constants/my_constant.dart @@ -9,9 +9,6 @@ Color blueAccentColor = Colors.blueAccent; Color whiteColor = Colors.white; Color closeIconColor = Colors.redAccent; - - - /// Icon Size /// const double iconSize = 15; const double largeIconSize = 20; diff --git a/lib/main.dart b/lib/main.dart index c264c96..52455df 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -7,8 +7,6 @@ import "package:xconn_ui/screens/desktop/desktop_home.dart"; import "package:xconn_ui/screens/mobile/mobile_home.dart"; import "package:xconn_ui/screens/tablet/tablet_home.dart"; - - void main() { runApp(const MyApp()); } @@ -18,19 +16,20 @@ class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { - return MultiProvider(providers: [ - ChangeNotifierProvider(create: (context) => ArgsProvider()), - ChangeNotifierProvider(create: (context) => TableDataProvider()), - ], + return MultiProvider( + providers: [ + ChangeNotifierProvider(create: (context) => ArgsProvider()), + ChangeNotifierProvider(create: (context) => TableDataProvider()), + ], child: MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( useMaterial3: true, ), - home: ResponsiveLayout( - mobileScaffold: const MobileHomeScaffold(), - tabletScaffold: const TabletHomeScaffold(), - desktopScaffold: const DesktopHomeScaffold(), + home: const ResponsiveLayout( + mobileScaffold: MobileHomeScaffold(), + tabletScaffold: TabletHomeScaffold(), + desktopScaffold: DesktopHomeScaffold(), ), ), ); diff --git a/lib/responsive/responsive_layout.dart b/lib/responsive/responsive_layout.dart index 1d16c4f..bf82a4c 100644 --- a/lib/responsive/responsive_layout.dart +++ b/lib/responsive/responsive_layout.dart @@ -1,22 +1,25 @@ import "package:flutter/material.dart"; class ResponsiveLayout extends StatelessWidget { - - ResponsiveLayout( - {required this.mobileScaffold, required this.tabletScaffold, required this.desktopScaffold, super.key,}); - Widget mobileScaffold; - Widget tabletScaffold; - Widget desktopScaffold; + const ResponsiveLayout({ + required this.mobileScaffold, + required this.tabletScaffold, + required this.desktopScaffold, + super.key, + }); + final Widget mobileScaffold; + final Widget tabletScaffold; + final Widget desktopScaffold; @override Widget build(BuildContext context) { return LayoutBuilder( - builder: (context, constraints){ - if(constraints.maxWidth < 500){ + builder: (context, constraints) { + if (constraints.maxWidth < 500) { return mobileScaffold; - }else if(constraints.maxWidth < 1100){ + } else if (constraints.maxWidth < 1100) { return tabletScaffold; - }else{ + } else { return desktopScaffold; } }, diff --git a/lib/screens/mobile/mobile_home.dart b/lib/screens/mobile/mobile_home.dart index 18cafbf..d1c9a46 100644 --- a/lib/screens/mobile/mobile_home.dart +++ b/lib/screens/mobile/mobile_home.dart @@ -32,9 +32,8 @@ class _MobileHomeScaffoldState extends State with TickerProv _tabController.addListener(_handleTabSelection); } - // TODO HANDLE TABS SELECTION - void _handleTabSelection(){ + void _handleTabSelection() { setState(() {}); } @@ -61,7 +60,8 @@ class _MobileHomeScaffoldState extends State with TickerProv @override void dispose() { - _tabController..removeListener(_handleTabSelection) + _tabController + ..removeListener(_handleTabSelection) ..dispose(); super.dispose(); } @@ -85,36 +85,33 @@ class _MobileHomeScaffoldState extends State with TickerProv ], bottom: _tabNames.isNotEmpty ? PreferredSize( - preferredSize: const Size.fromHeight(kToolbarHeight), - child: TabBar( - controller: _tabController, - isScrollable: true, - indicatorColor: blueAccentColor, - indicatorWeight: 1, - tabs: _tabNames - .asMap() - .entries - .map((entry) => - _buildTabWithDeleteButton(entry.key, entry.value),) - .toList(), - ), - ) + preferredSize: const Size.fromHeight(kToolbarHeight), + child: TabBar( + controller: _tabController, + isScrollable: true, + indicatorColor: blueAccentColor, + indicatorWeight: 1, + tabs: _tabNames + .asMap() + .entries + .map( + (entry) => _buildTabWithDeleteButton(entry.key, entry.value), + ) + .toList(), + ), + ) : null, ), drawer: const Drawer(), body: _tabNames.isNotEmpty ? Padding( - padding: const EdgeInsets.only(top: 10), - child: TabBarView( - physics: const NeverScrollableScrollPhysics(), - controller: _tabController, - children: _tabContents - .asMap() - .entries - .map((entry) => _buildTab(entry.key)) - .toList(), - ), - ) + padding: const EdgeInsets.only(top: 10), + child: TabBarView( + physics: const NeverScrollableScrollPhysics(), + controller: _tabController, + children: _tabContents.asMap().entries.map((entry) => _buildTab(entry.key)).toList(), + ), + ) : const Center(child: Text("No Tabs")), ); } @@ -169,10 +166,11 @@ class _MobileHomeScaffoldState extends State with TickerProv SizedBox( width: 100, child: DropdownButton( - value: _tabData[index].selectedValue.isEmpty - ? null - : _tabData[index].selectedValue, - hint: Text("Actions", style: TextStyle(color: dropDownTextColor),), + value: _tabData[index].selectedValue.isEmpty ? null : _tabData[index].selectedValue, + hint: Text( + "Actions", + style: TextStyle(color: dropDownTextColor), + ), items: [ "Register", "Subscribe", @@ -181,7 +179,10 @@ class _MobileHomeScaffoldState extends State with TickerProv ].map((String value) { return DropdownMenuItem( value: value, - child: Text(value, style: TextStyle(color: dropDownTextColor),), + child: Text( + value, + style: TextStyle(color: dropDownTextColor), + ), ); }).toList(), onChanged: (String? newValue) { @@ -237,9 +238,7 @@ class _MobileHomeScaffoldState extends State with TickerProv borderRadius: BorderRadius.circular(8), ), child: DropdownButton( - value: _tabData[index].selectedSerializer.isEmpty - ? null - : _tabData[index].selectedSerializer, + value: _tabData[index].selectedSerializer.isEmpty ? null : _tabData[index].selectedSerializer, hint: const Text("Serializers"), items: [ "JSON", diff --git a/lib/screens/tablet/tablet_home.dart b/lib/screens/tablet/tablet_home.dart index efe9d14..ce02b97 100644 --- a/lib/screens/tablet/tablet_home.dart +++ b/lib/screens/tablet/tablet_home.dart @@ -32,9 +32,8 @@ class _TabletHomeScaffoldState extends State with TickerProv _tabController.addListener(_handleTabSelection); } - // TODO HANDLE TABS SELECTION - void _handleTabSelection(){ + void _handleTabSelection() { setState(() {}); } @@ -61,7 +60,8 @@ class _TabletHomeScaffoldState extends State with TickerProv @override void dispose() { - _tabController..removeListener(_handleTabSelection) + _tabController + ..removeListener(_handleTabSelection) ..dispose(); super.dispose(); } @@ -85,36 +85,33 @@ class _TabletHomeScaffoldState extends State with TickerProv ], bottom: _tabNames.isNotEmpty ? PreferredSize( - preferredSize: const Size.fromHeight(kToolbarHeight), - child: TabBar( - controller: _tabController, - isScrollable: true, - indicatorColor: blueAccentColor, - indicatorWeight: 1, - tabs: _tabNames - .asMap() - .entries - .map((entry) => - _buildTabWithDeleteButton(entry.key, entry.value),) - .toList(), - ), - ) + preferredSize: const Size.fromHeight(kToolbarHeight), + child: TabBar( + controller: _tabController, + isScrollable: true, + indicatorColor: blueAccentColor, + indicatorWeight: 1, + tabs: _tabNames + .asMap() + .entries + .map( + (entry) => _buildTabWithDeleteButton(entry.key, entry.value), + ) + .toList(), + ), + ) : null, ), drawer: const Drawer(), body: _tabNames.isNotEmpty ? Padding( - padding: const EdgeInsets.only(top: 10), - child: TabBarView( - physics: const NeverScrollableScrollPhysics(), - controller: _tabController, - children: _tabContents - .asMap() - .entries - .map((entry) => _buildTab(entry.key)) - .toList(), - ), - ) + padding: const EdgeInsets.only(top: 10), + child: TabBarView( + physics: const NeverScrollableScrollPhysics(), + controller: _tabController, + children: _tabContents.asMap().entries.map((entry) => _buildTab(entry.key)).toList(), + ), + ) : const Center(child: Text("No Tabs")), ); } @@ -169,10 +166,11 @@ class _TabletHomeScaffoldState extends State with TickerProv SizedBox( width: 100, child: DropdownButton( - value: _tabData[index].selectedValue.isEmpty - ? null - : _tabData[index].selectedValue, - hint: Text("Actions", style: TextStyle(color: dropDownTextColor),), + value: _tabData[index].selectedValue.isEmpty ? null : _tabData[index].selectedValue, + hint: Text( + "Actions", + style: TextStyle(color: dropDownTextColor), + ), items: [ "Register", "Subscribe", @@ -181,7 +179,10 @@ class _TabletHomeScaffoldState extends State with TickerProv ].map((String value) { return DropdownMenuItem( value: value, - child: Text(value, style: TextStyle(color: dropDownTextColor),), + child: Text( + value, + style: TextStyle(color: dropDownTextColor), + ), ); }).toList(), onChanged: (String? newValue) { @@ -237,9 +238,7 @@ class _TabletHomeScaffoldState extends State with TickerProv borderRadius: BorderRadius.circular(8), ), child: DropdownButton( - value: _tabData[index].selectedSerializer.isEmpty - ? null - : _tabData[index].selectedSerializer, + value: _tabData[index].selectedSerializer.isEmpty ? null : _tabData[index].selectedSerializer, hint: const Text("Serializers"), items: [ "JSON", diff --git a/lib/utils/args_screen.dart b/lib/utils/args_screen.dart index 56832c6..4a713e2 100644 --- a/lib/utils/args_screen.dart +++ b/lib/utils/args_screen.dart @@ -3,8 +3,6 @@ import "package:provider/provider.dart"; import "package:xconn_ui/Providers/args_provider.dart"; import "package:xconn_ui/constants/my_constant.dart"; - - class ArgsTextFormFields extends StatelessWidget { const ArgsTextFormFields({super.key}); @@ -43,8 +41,11 @@ class ArgsTextFormFields extends StatelessWidget { trailing: InkWell( hoverColor: Colors.blue.shade200, onTap: () => model.removeController(index), - child: Icon(Icons.delete, color: closeIconColor,),), - + child: Icon( + Icons.delete, + color: closeIconColor, + ), + ), ); }, ), diff --git a/lib/utils/kwargs_screen.dart b/lib/utils/kwargs_screen.dart index 7bbf50f..5f1a735 100644 --- a/lib/utils/kwargs_screen.dart +++ b/lib/utils/kwargs_screen.dart @@ -4,7 +4,6 @@ import "package:provider/provider.dart"; import "package:xconn_ui/Providers/kwargs_provider.dart"; import "package:xconn_ui/constants/my_constant.dart"; - class DynamicKeyValuePairs extends StatelessWidget { const DynamicKeyValuePairs({super.key}); @@ -39,7 +38,10 @@ class TableWidget extends StatefulWidget { class _TableWidgetState extends State { TableRow _buildTableRow( - Map rowData, int index, TableDataProvider tableProvider,) { + Map rowData, + int index, + TableDataProvider tableProvider, + ) { return TableRow( children: [ _buildTableCell( @@ -72,7 +74,10 @@ class _TableWidgetState extends State { ), _buildTableCell( IconButton( - icon: Icon(Icons.delete, color: closeIconColor,), + icon: Icon( + Icons.delete, + color: closeIconColor, + ), onPressed: () { setState(() { tableProvider.removeRow(index); @@ -110,16 +115,33 @@ class _TableWidgetState extends State { color: Colors.grey[300], ), children: [ - _buildTableCell(const Text("Key", - style: TextStyle(fontWeight: FontWeight.bold),),), - _buildTableCell(const Text("Value", - style: TextStyle(fontWeight: FontWeight.bold),),), - _buildTableCell(const Text("", - style: TextStyle(fontWeight: FontWeight.bold),),), + _buildTableCell( + const Text( + "Key", + style: TextStyle(fontWeight: FontWeight.bold), + ), + ), + _buildTableCell( + const Text( + "Value", + style: TextStyle(fontWeight: FontWeight.bold), + ), + ), + _buildTableCell( + const Text( + "", + style: TextStyle(fontWeight: FontWeight.bold), + ), + ), ], ), - ...widget.tableData.asMap().entries.map((entry) => _buildTableRow( - entry.value, entry.key, Provider.of(context),),), + ...widget.tableData.asMap().entries.map( + (entry) => _buildTableRow( + entry.value, + entry.key, + Provider.of(context), + ), + ), ], ); } From 99d89fc0c53bdad952dd825b89b77bd3c2de163f Mon Sep 17 00:00:00 2001 From: Shaki Sun Date: Mon, 20 May 2024 16:15:00 +0500 Subject: [PATCH 3/8] skip test --- lib/Providers/kwargs_provider.dart | 2 +- test/widget_test.dart | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/Providers/kwargs_provider.dart b/lib/Providers/kwargs_provider.dart index ac1afac..75589e1 100644 --- a/lib/Providers/kwargs_provider.dart +++ b/lib/Providers/kwargs_provider.dart @@ -2,7 +2,7 @@ import "package:flutter/cupertino.dart"; class TableDataProvider extends ChangeNotifier { final List> _tableData = [ - {"key": "", "value": ""} + {"key": "", "value": ""}, ]; List> get tableData => _tableData; diff --git a/test/widget_test.dart b/test/widget_test.dart index beff3e5..3bb574c 100644 --- a/test/widget_test.dart +++ b/test/widget_test.dart @@ -4,6 +4,8 @@ // utility in the flutter_test package. For example, you can send tap and scroll // gestures. You can also use WidgetTester to find child widgets in the widget // tree, read text, and verify that the values of widget properties are correct. +@Skip("skipping for now") +library; import "package:flutter/material.dart"; import "package:flutter_test/flutter_test.dart"; From 13df146dcf7a51540051437fb89dad3dd2aa267f Mon Sep 17 00:00:00 2001 From: Shaki Sun Date: Mon, 20 May 2024 19:46:07 +0500 Subject: [PATCH 4/8] fix tabcontroller issues --- lib/main.dart | 2 + lib/screens/mobile/mobile_home.dart | 58 ++++++++++++++++++++++++++--- lib/utils/kwargs_screen.dart | 13 +++---- 3 files changed, 61 insertions(+), 12 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index 52455df..d55ffdb 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -2,6 +2,7 @@ import "package:flutter/material.dart"; import "package:provider/provider.dart"; import "package:xconn_ui/Providers/args_provider.dart"; import "package:xconn_ui/Providers/kwargs_provider.dart"; +import "package:xconn_ui/Providers/protocols_calling_provider.dart"; import "package:xconn_ui/responsive/responsive_layout.dart"; import "package:xconn_ui/screens/desktop/desktop_home.dart"; import "package:xconn_ui/screens/mobile/mobile_home.dart"; @@ -20,6 +21,7 @@ class MyApp extends StatelessWidget { providers: [ ChangeNotifierProvider(create: (context) => ArgsProvider()), ChangeNotifierProvider(create: (context) => TableDataProvider()), + ChangeNotifierProvider(create: (context) => ProtocolsCallingProvider()), ], child: MaterialApp( debugShowCheckedModeBanner: false, diff --git a/lib/screens/mobile/mobile_home.dart b/lib/screens/mobile/mobile_home.dart index d1c9a46..4f9a314 100644 --- a/lib/screens/mobile/mobile_home.dart +++ b/lib/screens/mobile/mobile_home.dart @@ -1,3 +1,4 @@ +import "package:flutter/foundation.dart"; import "package:flutter/material.dart"; import "package:provider/provider.dart"; import "package:xconn_ui/Providers/args_provider.dart"; @@ -6,6 +7,8 @@ import "package:xconn_ui/constants/my_constant.dart"; import "package:xconn_ui/utils/args_screen.dart"; import "package:xconn_ui/utils/kwargs_screen.dart"; +import "../../Providers/protocols_calling_provider.dart"; + class TabData { String selectedValue = ""; String selectedSerializer = ""; @@ -24,6 +27,8 @@ class _MobileHomeScaffoldState extends State with TickerProv final List _tabNames = ["Tab 1"]; final List _tabContents = ["Content for Tab 1"]; final List _tabData = [TabData()]; + final TextEditingController linkController = TextEditingController(); + final TextEditingController realmController = TextEditingController(); @override void initState() { @@ -37,27 +42,57 @@ class _MobileHomeScaffoldState extends State with TickerProv setState(() {}); } + // void _addTab() { + // setState(() { + // int newIndex = _tabNames.length + 1; + // _tabNames.add("Tab $newIndex"); + // _tabContents.add("Content for Tab $newIndex"); + // _tabData.add(TabData()); + // _tabController = TabController(length: _tabNames.length, vsync: this); + // _tabController.addListener(_handleTabSelection); + // }); + // } + + // void _removeTab(int index) { + // setState(() { + // _tabNames.removeAt(index); + // _tabContents.removeAt(index); + // _tabData.removeAt(index); + // _tabController = TabController(length: _tabNames.length, vsync: this); + // _tabController.addListener(_handleTabSelection); + // }); + // } + + void _addTab() { setState(() { int newIndex = _tabNames.length + 1; _tabNames.add("Tab $newIndex"); _tabContents.add("Content for Tab $newIndex"); _tabData.add(TabData()); - _tabController = TabController(length: _tabNames.length, vsync: this); - _tabController.addListener(_handleTabSelection); + if (_tabController == null || _tabController.length != _tabNames.length) { + _tabController = TabController(length: _tabNames.length, vsync: this); + _tabController.addListener(_handleTabSelection); + } }); } + + void _removeTab(int index) { setState(() { _tabNames.removeAt(index); _tabContents.removeAt(index); _tabData.removeAt(index); - _tabController = TabController(length: _tabNames.length, vsync: this); - _tabController.addListener(_handleTabSelection); + + if (_tabController.length != _tabNames.length) { + _tabController = TabController(length: _tabNames.length, vsync: this); + _tabController.addListener(_handleTabSelection); + } }); } + @override void dispose() { _tabController @@ -149,6 +184,7 @@ class _MobileHomeScaffoldState extends State with TickerProv } Widget _buildTab(int index) { + var provider = Provider.of(context, listen: false); return SingleChildScrollView( physics: const BouncingScrollPhysics(), child: Column( @@ -210,6 +246,7 @@ class _MobileHomeScaffoldState extends State with TickerProv ), Expanded( child: TextFormField( + controller: linkController, decoration: const InputDecoration( hintText: "Enter URL or paste text", labelText: "Enter URL or paste text", @@ -262,6 +299,7 @@ class _MobileHomeScaffoldState extends State with TickerProv ), Expanded( child: TextFormField( + controller: realmController, decoration: InputDecoration( hintText: "Enter realm here", labelText: "Enter realm here", @@ -554,7 +592,10 @@ class _MobileHomeScaffoldState extends State with TickerProv Padding( padding: const EdgeInsets.symmetric(horizontal: 110), child: MaterialButton( - onPressed: () {}, + onPressed: () async { + await provider.connect(_tabData[index].selectedSerializer, linkController.text, realmController.text, + _tabData[index].selectedValue, _tabData[index].sendButtonText,); + }, color: Colors.blueAccent, minWidth: 200, shape: RoundedRectangleBorder( @@ -577,4 +618,11 @@ class _MobileHomeScaffoldState extends State with TickerProv ), ); } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties.add(DiagnosticsProperty('linkController', linkController)); + properties.add(DiagnosticsProperty('realmController', realmController)); + } } diff --git a/lib/utils/kwargs_screen.dart b/lib/utils/kwargs_screen.dart index 5f1a735..4f7cb37 100644 --- a/lib/utils/kwargs_screen.dart +++ b/lib/utils/kwargs_screen.dart @@ -42,6 +42,7 @@ class _TableWidgetState extends State { int index, TableDataProvider tableProvider, ) { + print("nenanena"); return TableRow( children: [ _buildTableCell( @@ -79,9 +80,8 @@ class _TableWidgetState extends State { color: closeIconColor, ), onPressed: () { - setState(() { - tableProvider.removeRow(index); - }); + tableProvider.removeRow(index); + // setState(() {}); }, ), ), @@ -92,7 +92,6 @@ class _TableWidgetState extends State { TableCell _buildTableCell(Widget child) { return TableCell( child: Container( - // padding: const EdgeInsets.all(8), alignment: Alignment.center, height: 50, child: child, @@ -105,9 +104,9 @@ class _TableWidgetState extends State { return Table( border: TableBorder.all(color: Colors.grey), columnWidths: const { - 0: FixedColumnWidth(150), // Width for Key column - 1: FixedColumnWidth(150), // Width for Value column - 2: FixedColumnWidth(50), // Width for Actions column + 0: FixedColumnWidth(150), + 1: FixedColumnWidth(150), + 2: FixedColumnWidth(50), }, children: [ TableRow( From f6cb3dadb965ebbfc248dccac4559b35e0c90daf Mon Sep 17 00:00:00 2001 From: Shaki Sun Date: Mon, 20 May 2024 19:56:33 +0500 Subject: [PATCH 5/8] fix tabcontroller warning --- lib/main.dart | 2 -- lib/screens/mobile/mobile_home.dart | 20 ++++++-------------- lib/utils/kwargs_screen.dart | 1 - 3 files changed, 6 insertions(+), 17 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index d55ffdb..52455df 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -2,7 +2,6 @@ import "package:flutter/material.dart"; import "package:provider/provider.dart"; import "package:xconn_ui/Providers/args_provider.dart"; import "package:xconn_ui/Providers/kwargs_provider.dart"; -import "package:xconn_ui/Providers/protocols_calling_provider.dart"; import "package:xconn_ui/responsive/responsive_layout.dart"; import "package:xconn_ui/screens/desktop/desktop_home.dart"; import "package:xconn_ui/screens/mobile/mobile_home.dart"; @@ -21,7 +20,6 @@ class MyApp extends StatelessWidget { providers: [ ChangeNotifierProvider(create: (context) => ArgsProvider()), ChangeNotifierProvider(create: (context) => TableDataProvider()), - ChangeNotifierProvider(create: (context) => ProtocolsCallingProvider()), ], child: MaterialApp( debugShowCheckedModeBanner: false, diff --git a/lib/screens/mobile/mobile_home.dart b/lib/screens/mobile/mobile_home.dart index 4f9a314..61dc144 100644 --- a/lib/screens/mobile/mobile_home.dart +++ b/lib/screens/mobile/mobile_home.dart @@ -7,8 +7,6 @@ import "package:xconn_ui/constants/my_constant.dart"; import "package:xconn_ui/utils/args_screen.dart"; import "package:xconn_ui/utils/kwargs_screen.dart"; -import "../../Providers/protocols_calling_provider.dart"; - class TabData { String selectedValue = ""; String selectedSerializer = ""; @@ -63,22 +61,19 @@ class _MobileHomeScaffoldState extends State with TickerProv // }); // } - void _addTab() { setState(() { int newIndex = _tabNames.length + 1; _tabNames.add("Tab $newIndex"); _tabContents.add("Content for Tab $newIndex"); _tabData.add(TabData()); - if (_tabController == null || _tabController.length != _tabNames.length) { + if (_tabController.length != _tabNames.length) { _tabController = TabController(length: _tabNames.length, vsync: this); _tabController.addListener(_handleTabSelection); } }); } - - void _removeTab(int index) { setState(() { _tabNames.removeAt(index); @@ -92,7 +87,6 @@ class _MobileHomeScaffoldState extends State with TickerProv }); } - @override void dispose() { _tabController @@ -184,7 +178,7 @@ class _MobileHomeScaffoldState extends State with TickerProv } Widget _buildTab(int index) { - var provider = Provider.of(context, listen: false); + // var provider = Provider.of(context, listen: false); return SingleChildScrollView( physics: const BouncingScrollPhysics(), child: Column( @@ -592,10 +586,7 @@ class _MobileHomeScaffoldState extends State with TickerProv Padding( padding: const EdgeInsets.symmetric(horizontal: 110), child: MaterialButton( - onPressed: () async { - await provider.connect(_tabData[index].selectedSerializer, linkController.text, realmController.text, - _tabData[index].selectedValue, _tabData[index].sendButtonText,); - }, + onPressed: () async {}, color: Colors.blueAccent, minWidth: 200, shape: RoundedRectangleBorder( @@ -622,7 +613,8 @@ class _MobileHomeScaffoldState extends State with TickerProv @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties.add(DiagnosticsProperty('linkController', linkController)); - properties.add(DiagnosticsProperty('realmController', realmController)); + properties + ..add(DiagnosticsProperty("linkController", linkController)) + ..add(DiagnosticsProperty("realmController", realmController)); } } diff --git a/lib/utils/kwargs_screen.dart b/lib/utils/kwargs_screen.dart index 4f7cb37..0277686 100644 --- a/lib/utils/kwargs_screen.dart +++ b/lib/utils/kwargs_screen.dart @@ -42,7 +42,6 @@ class _TableWidgetState extends State { int index, TableDataProvider tableProvider, ) { - print("nenanena"); return TableRow( children: [ _buildTableCell( From d5fc1c47229a8ac916803475fe96a8ba1c08be62 Mon Sep 17 00:00:00 2001 From: Shaki Sun Date: Mon, 20 May 2024 20:10:06 +0500 Subject: [PATCH 6/8] fix assigning values to key and values warning --- lib/main.dart | 2 ++ lib/utils/kwargs_screen.dart | 14 ++++++++------ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index 52455df..aeea413 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -24,6 +24,8 @@ class MyApp extends StatelessWidget { child: MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( + primarySwatch: Colors.blue, + fontFamily: "Arial", useMaterial3: true, ), home: const ResponsiveLayout( diff --git a/lib/utils/kwargs_screen.dart b/lib/utils/kwargs_screen.dart index 0277686..aa5edb3 100644 --- a/lib/utils/kwargs_screen.dart +++ b/lib/utils/kwargs_screen.dart @@ -48,9 +48,10 @@ class _TableWidgetState extends State { TextFormField( initialValue: rowData["key"], onChanged: (newValue) { - setState(() { - rowData["key"] = newValue; - }); + // setState(() { + // rowData["key"] = newValue; + // }); + rowData["key"] = newValue; }, decoration: const InputDecoration( border: InputBorder.none, @@ -62,9 +63,10 @@ class _TableWidgetState extends State { TextFormField( initialValue: rowData["value"], onChanged: (newValue) { - setState(() { - rowData["value"] = newValue; - }); + rowData["value"] = newValue; + // setState(() { + // rowData["value"] = newValue; + // }); }, decoration: const InputDecoration( border: InputBorder.none, From 7185b8cd83e851f7d162c7c0f6618a8a58ce141a Mon Sep 17 00:00:00 2001 From: Shaki Sun Date: Tue, 21 May 2024 20:06:41 +0500 Subject: [PATCH 7/8] change if else condition to switch --- lib/Providers/kwargs_provider.dart | 6 +- .../my_constant.dart => constants.dart} | 0 lib/main.dart | 8 +- lib/screens/desktop/desktop_home.dart | 12 - lib/screens/mobile/mobile_home.dart | 559 +++++++++-------- lib/screens/tablet/tablet_home.dart | 580 ------------------ lib/utils/args_screen.dart | 3 +- lib/utils/kwargs_screen.dart | 49 +- lib/utils/tab_data_class.dart | 5 + 9 files changed, 337 insertions(+), 885 deletions(-) rename lib/{constants/my_constant.dart => constants.dart} (100%) delete mode 100644 lib/screens/desktop/desktop_home.dart delete mode 100644 lib/screens/tablet/tablet_home.dart create mode 100644 lib/utils/tab_data_class.dart diff --git a/lib/Providers/kwargs_provider.dart b/lib/Providers/kwargs_provider.dart index 75589e1..bf2683c 100644 --- a/lib/Providers/kwargs_provider.dart +++ b/lib/Providers/kwargs_provider.dart @@ -1,11 +1,11 @@ import "package:flutter/cupertino.dart"; -class TableDataProvider extends ChangeNotifier { - final List> _tableData = [ +class KwargsProvider extends ChangeNotifier { + final List> _tableData = [ {"key": "", "value": ""}, ]; - List> get tableData => _tableData; + List> get tableData => _tableData; void addRow(Map rowData) { _tableData.add(rowData); diff --git a/lib/constants/my_constant.dart b/lib/constants.dart similarity index 100% rename from lib/constants/my_constant.dart rename to lib/constants.dart diff --git a/lib/main.dart b/lib/main.dart index aeea413..65f42e6 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -3,9 +3,7 @@ import "package:provider/provider.dart"; import "package:xconn_ui/Providers/args_provider.dart"; import "package:xconn_ui/Providers/kwargs_provider.dart"; import "package:xconn_ui/responsive/responsive_layout.dart"; -import "package:xconn_ui/screens/desktop/desktop_home.dart"; import "package:xconn_ui/screens/mobile/mobile_home.dart"; -import "package:xconn_ui/screens/tablet/tablet_home.dart"; void main() { runApp(const MyApp()); @@ -19,7 +17,7 @@ class MyApp extends StatelessWidget { return MultiProvider( providers: [ ChangeNotifierProvider(create: (context) => ArgsProvider()), - ChangeNotifierProvider(create: (context) => TableDataProvider()), + ChangeNotifierProvider(create: (context) => KwargsProvider()), ], child: MaterialApp( debugShowCheckedModeBanner: false, @@ -30,8 +28,8 @@ class MyApp extends StatelessWidget { ), home: const ResponsiveLayout( mobileScaffold: MobileHomeScaffold(), - tabletScaffold: TabletHomeScaffold(), - desktopScaffold: DesktopHomeScaffold(), + tabletScaffold: MobileHomeScaffold(), + desktopScaffold: MobileHomeScaffold(), ), ), ); diff --git a/lib/screens/desktop/desktop_home.dart b/lib/screens/desktop/desktop_home.dart deleted file mode 100644 index 9ed8464..0000000 --- a/lib/screens/desktop/desktop_home.dart +++ /dev/null @@ -1,12 +0,0 @@ -import "package:flutter/material.dart"; - -class DesktopHomeScaffold extends StatelessWidget { - const DesktopHomeScaffold({super.key}); - - @override - Widget build(BuildContext context) { - return const Scaffold( - backgroundColor: Colors.greenAccent, - ); - } -} diff --git a/lib/screens/mobile/mobile_home.dart b/lib/screens/mobile/mobile_home.dart index 61dc144..cf05451 100644 --- a/lib/screens/mobile/mobile_home.dart +++ b/lib/screens/mobile/mobile_home.dart @@ -3,15 +3,10 @@ import "package:flutter/material.dart"; import "package:provider/provider.dart"; import "package:xconn_ui/Providers/args_provider.dart"; import "package:xconn_ui/Providers/kwargs_provider.dart"; -import "package:xconn_ui/constants/my_constant.dart"; +import "package:xconn_ui/constants.dart"; import "package:xconn_ui/utils/args_screen.dart"; import "package:xconn_ui/utils/kwargs_screen.dart"; - -class TabData { - String selectedValue = ""; - String selectedSerializer = ""; - String sendButtonText = "Send"; -} +import "package:xconn_ui/utils/tab_data_class.dart"; class MobileHomeScaffold extends StatefulWidget { const MobileHomeScaffold({super.key}); @@ -27,6 +22,7 @@ class _MobileHomeScaffoldState extends State with TickerProv final List _tabData = [TabData()]; final TextEditingController linkController = TextEditingController(); final TextEditingController realmController = TextEditingController(); + final TextEditingController topicProcedureController = TextEditingController(); @override void initState() { @@ -35,32 +31,11 @@ class _MobileHomeScaffoldState extends State with TickerProv _tabController.addListener(_handleTabSelection); } - // TODO HANDLE TABS SELECTION + // HANDLE TABS SELECTION void _handleTabSelection() { setState(() {}); } - // void _addTab() { - // setState(() { - // int newIndex = _tabNames.length + 1; - // _tabNames.add("Tab $newIndex"); - // _tabContents.add("Content for Tab $newIndex"); - // _tabData.add(TabData()); - // _tabController = TabController(length: _tabNames.length, vsync: this); - // _tabController.addListener(_handleTabSelection); - // }); - // } - - // void _removeTab(int index) { - // setState(() { - // _tabNames.removeAt(index); - // _tabContents.removeAt(index); - // _tabData.removeAt(index); - // _tabController = TabController(length: _tabNames.length, vsync: this); - // _tabController.addListener(_handleTabSelection); - // }); - // } - void _addTab() { setState(() { int newIndex = _tabNames.length + 1; @@ -145,6 +120,7 @@ class _MobileHomeScaffoldState extends State with TickerProv ); } + // Delete Tab Widget _buildTabWithDeleteButton(int index, String tabName) { final isSelected = _tabController.index == index; return GestureDetector( @@ -177,8 +153,8 @@ class _MobileHomeScaffoldState extends State with TickerProv ); } + // Main Build Tab Widget _buildTab(int index) { - // var provider = Provider.of(context, listen: false); return SingleChildScrollView( physics: const BouncingScrollPhysics(), child: Column( @@ -218,16 +194,31 @@ class _MobileHomeScaffoldState extends State with TickerProv onChanged: (String? newValue) { setState(() { _tabData[index].selectedValue = newValue!; - if (newValue == "Subscribe") { - _tabData[index].sendButtonText = "Subscribe"; - } else if (newValue == "Register") { - _tabData[index].sendButtonText = "Register"; - } else if (newValue == "Call") { - _tabData[index].sendButtonText = "Call"; - } else if (newValue == "Publish") { - _tabData[index].sendButtonText = "Publish"; - } else { - _tabData[index].sendButtonText = "Send"; + switch (newValue) { + case "Subscribe": + { + _tabData[index].sendButtonText = "Subscribe"; + break; + } + case "Register": + { + _tabData[index].sendButtonText = "Register"; + break; + } + case "Call": + { + _tabData[index].sendButtonText = "Call"; + break; + } + case "Publish": + { + _tabData[index].sendButtonText = "Publish"; + break; + } + default: + { + _tabData[index].sendButtonText = "Send"; + } } }); }, @@ -310,172 +301,158 @@ class _MobileHomeScaffoldState extends State with TickerProv const SizedBox( height: 20, ), - if (_tabData[index].sendButtonText == "Publish") ...[ - Padding( - padding: const EdgeInsets.symmetric(horizontal: 15), - child: TextFormField( - decoration: InputDecoration( - hintText: "Enter topic here", - labelText: "Enter topic here", - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(8), + + // Topic Procedure TextFormFields + buildTopicProcedure(_tabData[index].sendButtonText), + + const SizedBox( + height: 20, + ), + + // Args + buildArgs(_tabData[index].sendButtonText), + + const SizedBox( + height: 20, + ), + + // K-Wargs + buildKwargs(_tabData[index].sendButtonText), + + const SizedBox(height: 20), + Padding( + padding: const EdgeInsets.only(left: 25), + child: Align( + alignment: Alignment.topLeft, + child: SizedBox( + height: 100, + width: MediaQuery.of(context).size.width, + child: Text( + "Result", + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + color: blackColor, ), - contentPadding: const EdgeInsets.all(10), ), ), ), - ] else if (_tabData[index].sendButtonText == "Call") ...[ - Padding( - padding: const EdgeInsets.symmetric(horizontal: 15), - child: TextFormField( - decoration: InputDecoration( - hintText: "Enter procedure here", - labelText: "Enter procedure here", - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(8), - ), - contentPadding: const EdgeInsets.all(10), + ), + const SizedBox( + height: 50, + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 110), + child: MaterialButton( + onPressed: () {}, + color: Colors.blueAccent, + minWidth: 200, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8), + ), + child: Text( + _tabData[index].sendButtonText, + style: TextStyle( + color: whiteColor, + fontSize: 16, + fontWeight: FontWeight.w600, ), ), ), - ] else if (_tabData[index].sendButtonText == "Register") ...[ - Padding( - padding: const EdgeInsets.symmetric(horizontal: 15), - child: TextFormField( - decoration: InputDecoration( - hintText: "Enter procedure here", - labelText: "Enter procedure here", - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(8), - ), - contentPadding: const EdgeInsets.all(10), - ), + ), + const SizedBox( + height: 40, + ), + ], + ), + ); + } + + // Topic and Procedure TextFormFields Widget + Widget buildTopicProcedure(String sendButtonText) { + switch (sendButtonText) { + case "Publish": + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: TextFormField( + controller: topicProcedureController, + decoration: InputDecoration( + hintText: "Enter topic here", + labelText: "Enter topic here", + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), ), + contentPadding: const EdgeInsets.all(10), ), - ] else if (_tabData[index].sendButtonText == "Subscribe") ...[ - Padding( - padding: const EdgeInsets.symmetric(horizontal: 15), - child: TextFormField( - decoration: InputDecoration( - hintText: "Enter topic here", - labelText: "Enter topic here", - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(8), - ), - contentPadding: const EdgeInsets.all(10), - ), + ), + ); + + case "Call": + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: TextFormField( + controller: topicProcedureController, + decoration: InputDecoration( + hintText: "Enter procedure here", + labelText: "Enter procedure here", + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), ), + contentPadding: const EdgeInsets.all(10), ), - ] else ...[ - Container(), - ], - const SizedBox( - height: 20, ), - if (_tabData[index].sendButtonText == "Publish") ...[ - Column( - children: [ - Padding( - padding: const EdgeInsets.symmetric( - horizontal: 15, - ), - child: Column( - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - const Padding( - padding: EdgeInsets.only(left: 10), - child: Align( - alignment: Alignment.topLeft, - child: Text( - "Args", - style: TextStyle( - fontSize: 15, - fontWeight: FontWeight.w600, - color: Colors.black, - ), - ), - ), - ), - IconButton( - onPressed: () { - Provider.of( - context, - listen: false, - ).addController(); - }, - icon: const Icon( - Icons.add_box_sharp, - size: 24, - ), - ), - ], - ), - ], - ), - ), - const ArgsTextFormFields(), - ], + ); + + case "Register": + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: TextFormField( + controller: topicProcedureController, + decoration: InputDecoration( + hintText: "Enter procedure here", + labelText: "Enter procedure here", + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), + ), + contentPadding: const EdgeInsets.all(10), ), - ] else if (_tabData[index].sendButtonText == "Call") ...[ - Column( - children: [ - Padding( - padding: const EdgeInsets.symmetric( - horizontal: 15, - ), - child: Column( - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - const Padding( - padding: EdgeInsets.only(left: 10), - child: Align( - alignment: Alignment.topLeft, - child: Text( - "Args", - style: TextStyle( - fontSize: 15, - fontWeight: FontWeight.w600, - color: Colors.black, - ), - ), - ), - ), - IconButton( - onPressed: () { - Provider.of( - context, - listen: false, - ).addController(); - }, - icon: const Icon( - Icons.add_box_sharp, - size: 24, - ), - ), - ], - ), - ], - ), - ), - const ArgsTextFormFields(), - ], + ), + ); + + case "Subscribe": + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: TextFormField( + controller: topicProcedureController, + decoration: InputDecoration( + hintText: "Enter topic here", + labelText: "Enter topic here", + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), + ), + contentPadding: const EdgeInsets.all(10), ), - ], - const SizedBox( - height: 20, ), - if (_tabData[index].sendButtonText == "Publish") ...[ - Column( - children: [ - Padding( - padding: const EdgeInsets.symmetric( - horizontal: 15, - ), - child: Row( + ); + + default: + return Container(); + } + } + + // Build Args Widget + Widget buildArgs(String argsSendButton) { + switch (argsSendButton) { + case "Publish": + return Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15, + ), + child: Column( + children: [ + Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ const Padding( @@ -483,7 +460,7 @@ class _MobileHomeScaffoldState extends State with TickerProv child: Align( alignment: Alignment.topLeft, child: Text( - "Kwargs", + "Args", style: TextStyle( fontSize: 15, fontWeight: FontWeight.w600, @@ -494,13 +471,10 @@ class _MobileHomeScaffoldState extends State with TickerProv ), IconButton( onPressed: () { - Provider.of( + Provider.of( context, listen: false, - ).addRow({ - "key": "", - "value": "", - }); + ).addController(); }, icon: const Icon( Icons.add_box_sharp, @@ -509,18 +483,23 @@ class _MobileHomeScaffoldState extends State with TickerProv ), ], ), - ), - const DynamicKeyValuePairs(), - ], + ], + ), ), - ] else if (_tabData[index].sendButtonText == "Call") ...[ - Column( - children: [ - Padding( - padding: const EdgeInsets.symmetric( - horizontal: 15, - ), - child: Row( + const ArgsTextFormFields(), + ], + ); + + case "Call": + return Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15, + ), + child: Column( + children: [ + Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ const Padding( @@ -528,7 +507,7 @@ class _MobileHomeScaffoldState extends State with TickerProv child: Align( alignment: Alignment.topLeft, child: Text( - "Kwargs", + "Args", style: TextStyle( fontSize: 15, fontWeight: FontWeight.w600, @@ -539,13 +518,10 @@ class _MobileHomeScaffoldState extends State with TickerProv ), IconButton( onPressed: () { - Provider.of( + Provider.of( context, listen: false, - ).addRow({ - "key": "", - "value": "", - }); + ).addController(); }, icon: const Icon( Icons.add_box_sharp, @@ -554,60 +530,116 @@ class _MobileHomeScaffoldState extends State with TickerProv ), ], ), - ), - const DynamicKeyValuePairs(), - ], + ], + ), ), - ] else ...[ - Container(), + const ArgsTextFormFields(), ], - const SizedBox(height: 20), - Padding( - padding: const EdgeInsets.only(left: 25), - child: Align( - alignment: Alignment.topLeft, - child: SizedBox( - height: 100, - width: MediaQuery.of(context).size.width, - child: Text( - "Result", - style: TextStyle( - fontSize: 15, - fontWeight: FontWeight.w600, - color: blackColor, + ); + + default: + return Container(); + } + } + + // BUILD Kwargs Widget + Widget buildKwargs(String kWargSendButton) { + switch (kWargSendButton) { + case "Publish": + return Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const Padding( + padding: EdgeInsets.only(left: 10), + child: Align( + alignment: Alignment.topLeft, + child: Text( + "Kwargs", + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + color: Colors.black, + ), + ), + ), ), - ), + IconButton( + onPressed: () { + Provider.of( + context, + listen: false, + ).addRow({ + "key": "", + "value": "", + }); + }, + icon: const Icon( + Icons.add_box_sharp, + size: 24, + ), + ), + ], ), ), - ), - const SizedBox( - height: 50, - ), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 110), - child: MaterialButton( - onPressed: () async {}, - color: Colors.blueAccent, - minWidth: 200, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(8), + const DynamicKeyValuePairs(), + ], + ); + + case "Call": + return Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15, ), - child: Text( - _tabData[index].sendButtonText, - style: TextStyle( - color: whiteColor, - fontSize: 16, - fontWeight: FontWeight.w600, - ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const Padding( + padding: EdgeInsets.only(left: 10), + child: Align( + alignment: Alignment.topLeft, + child: Text( + "Kwargs", + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + color: Colors.black, + ), + ), + ), + ), + IconButton( + onPressed: () { + Provider.of( + context, + listen: false, + ).addRow({ + "key": "", + "value": "", + }); + }, + icon: const Icon( + Icons.add_box_sharp, + size: 24, + ), + ), + ], ), ), - ), - const SizedBox( - height: 40, - ), - ], - ), - ); + const DynamicKeyValuePairs(), + ], + ); + + default: + return Container(); + } } @override @@ -615,6 +647,11 @@ class _MobileHomeScaffoldState extends State with TickerProv super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("linkController", linkController)) - ..add(DiagnosticsProperty("realmController", realmController)); + ..add( + DiagnosticsProperty("realmController", realmController), + ) + ..add( + DiagnosticsProperty("topicProcedureController", topicProcedureController), + ); } } diff --git a/lib/screens/tablet/tablet_home.dart b/lib/screens/tablet/tablet_home.dart deleted file mode 100644 index ce02b97..0000000 --- a/lib/screens/tablet/tablet_home.dart +++ /dev/null @@ -1,580 +0,0 @@ -import "package:flutter/material.dart"; -import "package:provider/provider.dart"; -import "package:xconn_ui/Providers/args_provider.dart"; -import "package:xconn_ui/Providers/kwargs_provider.dart"; -import "package:xconn_ui/constants/my_constant.dart"; -import "package:xconn_ui/utils/args_screen.dart"; -import "package:xconn_ui/utils/kwargs_screen.dart"; - -class TabData { - String selectedValue = ""; - String selectedSerializer = ""; - String sendButtonText = "Send"; -} - -class TabletHomeScaffold extends StatefulWidget { - const TabletHomeScaffold({super.key}); - - @override - State createState() => _TabletHomeScaffoldState(); -} - -class _TabletHomeScaffoldState extends State with TickerProviderStateMixin { - late TabController _tabController; - final List _tabNames = ["Tab 1"]; - final List _tabContents = ["Content for Tab 1"]; - final List _tabData = [TabData()]; - - @override - void initState() { - super.initState(); - _tabController = TabController(length: _tabNames.length, vsync: this); - _tabController.addListener(_handleTabSelection); - } - - // TODO HANDLE TABS SELECTION - void _handleTabSelection() { - setState(() {}); - } - - void _addTab() { - setState(() { - int newIndex = _tabNames.length + 1; - _tabNames.add("Tab $newIndex"); - _tabContents.add("Content for Tab $newIndex"); - _tabData.add(TabData()); - _tabController = TabController(length: _tabNames.length, vsync: this); - _tabController.addListener(_handleTabSelection); - }); - } - - void _removeTab(int index) { - setState(() { - _tabNames.removeAt(index); - _tabContents.removeAt(index); - _tabData.removeAt(index); - _tabController = TabController(length: _tabNames.length, vsync: this); - _tabController.addListener(_handleTabSelection); - }); - } - - @override - void dispose() { - _tabController - ..removeListener(_handleTabSelection) - ..dispose(); - super.dispose(); - } - - @override - Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text( - "XConn", - style: TextStyle(color: homeAppBarTextColor, fontSize: 15), - ), - actions: [ - Padding( - padding: const EdgeInsets.only(right: 15), - child: IconButton( - onPressed: _addTab, - icon: const Icon(Icons.add_box_sharp), - ), - ), - ], - bottom: _tabNames.isNotEmpty - ? PreferredSize( - preferredSize: const Size.fromHeight(kToolbarHeight), - child: TabBar( - controller: _tabController, - isScrollable: true, - indicatorColor: blueAccentColor, - indicatorWeight: 1, - tabs: _tabNames - .asMap() - .entries - .map( - (entry) => _buildTabWithDeleteButton(entry.key, entry.value), - ) - .toList(), - ), - ) - : null, - ), - drawer: const Drawer(), - body: _tabNames.isNotEmpty - ? Padding( - padding: const EdgeInsets.only(top: 10), - child: TabBarView( - physics: const NeverScrollableScrollPhysics(), - controller: _tabController, - children: _tabContents.asMap().entries.map((entry) => _buildTab(entry.key)).toList(), - ), - ) - : const Center(child: Text("No Tabs")), - ); - } - - Widget _buildTabWithDeleteButton(int index, String tabName) { - final isSelected = _tabController.index == index; - return GestureDetector( - onTap: () { - _tabController.animateTo(index); - }, - child: Container( - margin: const EdgeInsets.symmetric(horizontal: 8), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - Text( - tabName, - style: TextStyle( - color: isSelected ? blueAccentColor : blackColor, - fontWeight: isSelected ? FontWeight.bold : FontWeight.normal, - ), - ), - IconButton( - icon: Icon( - Icons.close, - color: closeIconColor, - size: iconSize, - ), - onPressed: () => _removeTab(index), - ), - ], - ), - ), - ); - } - - Widget _buildTab(int index) { - return SingleChildScrollView( - physics: const BouncingScrollPhysics(), - child: Column( - children: [ - Padding( - padding: const EdgeInsets.symmetric(horizontal: 15), - child: Container( - padding: const EdgeInsets.symmetric(horizontal: 15), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(8), - border: Border.all(color: Colors.grey), - ), - child: Row( - children: [ - SizedBox( - width: 100, - child: DropdownButton( - value: _tabData[index].selectedValue.isEmpty ? null : _tabData[index].selectedValue, - hint: Text( - "Actions", - style: TextStyle(color: dropDownTextColor), - ), - items: [ - "Register", - "Subscribe", - "Call", - "Publish", - ].map((String value) { - return DropdownMenuItem( - value: value, - child: Text( - value, - style: TextStyle(color: dropDownTextColor), - ), - ); - }).toList(), - onChanged: (String? newValue) { - setState(() { - _tabData[index].selectedValue = newValue!; - if (newValue == "Subscribe") { - _tabData[index].sendButtonText = "Subscribe"; - } else if (newValue == "Register") { - _tabData[index].sendButtonText = "Register"; - } else if (newValue == "Call") { - _tabData[index].sendButtonText = "Call"; - } else if (newValue == "Publish") { - _tabData[index].sendButtonText = "Publish"; - } else { - _tabData[index].sendButtonText = "Send"; - } - }); - }, - ), - ), - Container( - height: 30, - width: 1, - color: Colors.grey, - ), - Expanded( - child: TextFormField( - decoration: const InputDecoration( - hintText: "Enter URL or paste text", - labelText: "Enter URL or paste text", - border: InputBorder.none, - contentPadding: EdgeInsets.all(10), - ), - ), - ), - ], - ), - ), - ), - const SizedBox( - height: 20, - ), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 15), - child: Row( - children: [ - Container( - padding: const EdgeInsets.symmetric( - horizontal: 10, - ), - decoration: BoxDecoration( - border: Border.all(color: Colors.grey), - borderRadius: BorderRadius.circular(8), - ), - child: DropdownButton( - value: _tabData[index].selectedSerializer.isEmpty ? null : _tabData[index].selectedSerializer, - hint: const Text("Serializers"), - items: [ - "JSON", - "CBOR", - "Msg Pack", - ].map((String value) { - return DropdownMenuItem( - value: value, - child: Text(value), - ); - }).toList(), - onChanged: (String? newValue) { - setState(() { - _tabData[index].selectedSerializer = newValue!; - }); - }, - ), - ), - const SizedBox( - width: 10, - ), - Expanded( - child: TextFormField( - decoration: InputDecoration( - hintText: "Enter realm here", - labelText: "Enter realm here", - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(8), - ), - contentPadding: const EdgeInsets.all(10), - ), - ), - ), - ], - ), - ), - const SizedBox( - height: 20, - ), - if (_tabData[index].sendButtonText == "Publish") ...[ - Padding( - padding: const EdgeInsets.symmetric(horizontal: 15), - child: TextFormField( - decoration: InputDecoration( - hintText: "Enter topic here", - labelText: "Enter topic here", - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(8), - ), - contentPadding: const EdgeInsets.all(10), - ), - ), - ), - ] else if (_tabData[index].sendButtonText == "Call") ...[ - Padding( - padding: const EdgeInsets.symmetric(horizontal: 15), - child: TextFormField( - decoration: InputDecoration( - hintText: "Enter procedure here", - labelText: "Enter procedure here", - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(8), - ), - contentPadding: const EdgeInsets.all(10), - ), - ), - ), - ] else if (_tabData[index].sendButtonText == "Register") ...[ - Padding( - padding: const EdgeInsets.symmetric(horizontal: 15), - child: TextFormField( - decoration: InputDecoration( - hintText: "Enter procedure here", - labelText: "Enter procedure here", - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(8), - ), - contentPadding: const EdgeInsets.all(10), - ), - ), - ), - ] else if (_tabData[index].sendButtonText == "Subscribe") ...[ - Padding( - padding: const EdgeInsets.symmetric(horizontal: 15), - child: TextFormField( - decoration: InputDecoration( - hintText: "Enter topic here", - labelText: "Enter topic here", - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(8), - ), - contentPadding: const EdgeInsets.all(10), - ), - ), - ), - ] else ...[ - Container(), - ], - const SizedBox( - height: 20, - ), - if (_tabData[index].sendButtonText == "Publish") ...[ - Column( - children: [ - Padding( - padding: const EdgeInsets.symmetric( - horizontal: 15, - ), - child: Column( - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - const Padding( - padding: EdgeInsets.only(left: 10), - child: Align( - alignment: Alignment.topLeft, - child: Text( - "Args", - style: TextStyle( - fontSize: 15, - fontWeight: FontWeight.w600, - color: Colors.black, - ), - ), - ), - ), - IconButton( - onPressed: () { - Provider.of( - context, - listen: false, - ).addController(); - }, - icon: const Icon( - Icons.add_box_sharp, - size: 24, - ), - ), - ], - ), - ], - ), - ), - const ArgsTextFormFields(), - ], - ), - ] else if (_tabData[index].sendButtonText == "Call") ...[ - Column( - children: [ - Padding( - padding: const EdgeInsets.symmetric( - horizontal: 15, - ), - child: Column( - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - const Padding( - padding: EdgeInsets.only(left: 10), - child: Align( - alignment: Alignment.topLeft, - child: Text( - "Args", - style: TextStyle( - fontSize: 15, - fontWeight: FontWeight.w600, - color: Colors.black, - ), - ), - ), - ), - IconButton( - onPressed: () { - Provider.of( - context, - listen: false, - ).addController(); - }, - icon: const Icon( - Icons.add_box_sharp, - size: 24, - ), - ), - ], - ), - ], - ), - ), - const ArgsTextFormFields(), - ], - ), - ], - const SizedBox( - height: 20, - ), - if (_tabData[index].sendButtonText == "Publish") ...[ - Column( - children: [ - Padding( - padding: const EdgeInsets.symmetric( - horizontal: 15, - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - const Padding( - padding: EdgeInsets.only(left: 10), - child: Align( - alignment: Alignment.topLeft, - child: Text( - "Kwargs", - style: TextStyle( - fontSize: 15, - fontWeight: FontWeight.w600, - color: Colors.black, - ), - ), - ), - ), - IconButton( - onPressed: () { - Provider.of( - context, - listen: false, - ).addRow({ - "key": "", - "value": "", - }); - }, - icon: const Icon( - Icons.add_box_sharp, - size: 24, - ), - ), - ], - ), - ), - const DynamicKeyValuePairs(), - ], - ), - ] else if (_tabData[index].sendButtonText == "Call") ...[ - Column( - children: [ - Padding( - padding: const EdgeInsets.symmetric( - horizontal: 15, - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - const Padding( - padding: EdgeInsets.only(left: 10), - child: Align( - alignment: Alignment.topLeft, - child: Text( - "Kwargs", - style: TextStyle( - fontSize: 15, - fontWeight: FontWeight.w600, - color: Colors.black, - ), - ), - ), - ), - IconButton( - onPressed: () { - Provider.of( - context, - listen: false, - ).addRow({ - "key": "", - "value": "", - }); - }, - icon: const Icon( - Icons.add_box_sharp, - size: 24, - ), - ), - ], - ), - ), - const DynamicKeyValuePairs(), - ], - ), - ] else ...[ - Container(), - ], - const SizedBox(height: 20), - Padding( - padding: const EdgeInsets.only(left: 25), - child: Align( - alignment: Alignment.topLeft, - child: SizedBox( - height: 100, - width: MediaQuery.of(context).size.width, - child: Text( - "Result", - style: TextStyle( - fontSize: 15, - fontWeight: FontWeight.w600, - color: blackColor, - ), - ), - ), - ), - ), - const SizedBox( - height: 50, - ), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 110), - child: MaterialButton( - onPressed: () {}, - color: Colors.blueAccent, - minWidth: 200, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(8), - ), - child: Text( - _tabData[index].sendButtonText, - style: TextStyle( - color: whiteColor, - fontSize: 16, - fontWeight: FontWeight.w600, - ), - ), - ), - ), - const SizedBox( - height: 40, - ), - ], - ), - ); - } -} diff --git a/lib/utils/args_screen.dart b/lib/utils/args_screen.dart index 4a713e2..7c04bc8 100644 --- a/lib/utils/args_screen.dart +++ b/lib/utils/args_screen.dart @@ -1,7 +1,8 @@ import "package:flutter/material.dart"; import "package:provider/provider.dart"; import "package:xconn_ui/Providers/args_provider.dart"; -import "package:xconn_ui/constants/my_constant.dart"; +import "package:xconn_ui/constants.dart"; + class ArgsTextFormFields extends StatelessWidget { const ArgsTextFormFields({super.key}); diff --git a/lib/utils/kwargs_screen.dart b/lib/utils/kwargs_screen.dart index aa5edb3..9938a7f 100644 --- a/lib/utils/kwargs_screen.dart +++ b/lib/utils/kwargs_screen.dart @@ -2,15 +2,25 @@ import "package:flutter/foundation.dart"; import "package:flutter/material.dart"; import "package:provider/provider.dart"; import "package:xconn_ui/Providers/kwargs_provider.dart"; -import "package:xconn_ui/constants/my_constant.dart"; class DynamicKeyValuePairs extends StatelessWidget { const DynamicKeyValuePairs({super.key}); @override Widget build(BuildContext context) { - return Consumer( + return Consumer( builder: (context, tableProvider, _) { + // Extract key-value pairs from tableProvider.tableData + Map kWarValues = {}; + + for (final map in tableProvider.tableData) { + String key = map["key"]; + dynamic value = map["value"]; + if (key.isNotEmpty) { + kWarValues[key] = value; + } + } + return SizedBox( height: 200, child: SingleChildScrollView( @@ -24,7 +34,7 @@ class DynamicKeyValuePairs extends StatelessWidget { class TableWidget extends StatefulWidget { const TableWidget(this.tableData, {super.key}); - final List> tableData; + final List> tableData; @override State createState() => _TableWidgetState(); @@ -32,25 +42,22 @@ class TableWidget extends StatefulWidget { @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties.add(IterableProperty>("tableData", tableData)); + properties.add(IterableProperty>("tableData", tableData)); } } class _TableWidgetState extends State { TableRow _buildTableRow( - Map rowData, - int index, - TableDataProvider tableProvider, - ) { + Map rowData, + int index, + KwargsProvider kWarProvider, + ) { return TableRow( children: [ _buildTableCell( TextFormField( initialValue: rowData["key"], onChanged: (newValue) { - // setState(() { - // rowData["key"] = newValue; - // }); rowData["key"] = newValue; }, decoration: const InputDecoration( @@ -64,9 +71,6 @@ class _TableWidgetState extends State { initialValue: rowData["value"], onChanged: (newValue) { rowData["value"] = newValue; - // setState(() { - // rowData["value"] = newValue; - // }); }, decoration: const InputDecoration( border: InputBorder.none, @@ -76,13 +80,12 @@ class _TableWidgetState extends State { ), _buildTableCell( IconButton( - icon: Icon( + icon: const Icon( Icons.delete, - color: closeIconColor, + color: Colors.red, ), onPressed: () { - tableProvider.removeRow(index); - // setState(() {}); + kWarProvider.removeRow(index); }, ), ), @@ -137,11 +140,11 @@ class _TableWidgetState extends State { ), ...widget.tableData.asMap().entries.map( (entry) => _buildTableRow( - entry.value, - entry.key, - Provider.of(context), - ), - ), + entry.value, + entry.key, + Provider.of(context, listen: false), + ), + ), ], ); } diff --git a/lib/utils/tab_data_class.dart b/lib/utils/tab_data_class.dart new file mode 100644 index 0000000..1b89396 --- /dev/null +++ b/lib/utils/tab_data_class.dart @@ -0,0 +1,5 @@ +class TabData { + String selectedValue = ""; + String selectedSerializer = ""; + String sendButtonText = "Send"; +} From 60d467047f4cd64e8374499ec4ee36e2c7b090c9 Mon Sep 17 00:00:00 2001 From: Shaki Sun Date: Wed, 22 May 2024 17:51:27 +0500 Subject: [PATCH 8/8] fix msgpack text and hide send button --- lib/screens/mobile/mobile_home.dart | 155 +++++++++++++++++++--------- lib/utils/args_screen.dart | 1 - lib/utils/kwargs_screen.dart | 18 ++-- lib/utils/tab_data_class.dart | 22 ++++ 4 files changed, 139 insertions(+), 57 deletions(-) diff --git a/lib/screens/mobile/mobile_home.dart b/lib/screens/mobile/mobile_home.dart index cf05451..690a0eb 100644 --- a/lib/screens/mobile/mobile_home.dart +++ b/lib/screens/mobile/mobile_home.dart @@ -1,4 +1,3 @@ -import "package:flutter/foundation.dart"; import "package:flutter/material.dart"; import "package:provider/provider.dart"; import "package:xconn_ui/Providers/args_provider.dart"; @@ -20,9 +19,6 @@ class _MobileHomeScaffoldState extends State with TickerProv final List _tabNames = ["Tab 1"]; final List _tabContents = ["Content for Tab 1"]; final List _tabData = [TabData()]; - final TextEditingController linkController = TextEditingController(); - final TextEditingController realmController = TextEditingController(); - final TextEditingController topicProcedureController = TextEditingController(); @override void initState() { @@ -53,6 +49,7 @@ class _MobileHomeScaffoldState extends State with TickerProv setState(() { _tabNames.removeAt(index); _tabContents.removeAt(index); + _tabData[index].disposeControllers(); _tabData.removeAt(index); if (_tabController.length != _tabNames.length) { @@ -231,7 +228,7 @@ class _MobileHomeScaffoldState extends State with TickerProv ), Expanded( child: TextFormField( - controller: linkController, + controller: _tabData[index].linkController, decoration: const InputDecoration( hintText: "Enter URL or paste text", labelText: "Enter URL or paste text", @@ -265,7 +262,7 @@ class _MobileHomeScaffoldState extends State with TickerProv items: [ "JSON", "CBOR", - "Msg Pack", + "MsgPack", ].map((String value) { return DropdownMenuItem( value: value, @@ -284,7 +281,7 @@ class _MobileHomeScaffoldState extends State with TickerProv ), Expanded( child: TextFormField( - controller: realmController, + controller: _tabData[index].realmController, decoration: InputDecoration( hintText: "Enter realm here", labelText: "Enter realm here", @@ -303,7 +300,7 @@ class _MobileHomeScaffoldState extends State with TickerProv ), // Topic Procedure TextFormFields - buildTopicProcedure(_tabData[index].sendButtonText), + buildTopicProcedure(_tabData[index].topicProcedureController, _tabData[index].sendButtonText), const SizedBox( height: 20, @@ -320,6 +317,13 @@ class _MobileHomeScaffoldState extends State with TickerProv buildKwargs(_tabData[index].sendButtonText), const SizedBox(height: 20), + + // Send Button + sendButton(_tabData[index].sendButtonText), + + const SizedBox( + height: 50, + ), Padding( padding: const EdgeInsets.only(left: 25), child: Align( @@ -339,43 +343,113 @@ class _MobileHomeScaffoldState extends State with TickerProv ), ), const SizedBox( - height: 50, + height: 40, ), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 110), - child: MaterialButton( - onPressed: () {}, - color: Colors.blueAccent, - minWidth: 200, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(8), + ], + ), + ); + } + + // Send Button Widget + Widget sendButton(String sendButton) { + switch (sendButton) { + case "Publish": + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 110), + child: MaterialButton( + onPressed: () {}, + color: Colors.blueAccent, + minWidth: 200, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8), + ), + child: Text( + sendButton, + style: TextStyle( + color: whiteColor, + fontSize: 16, + fontWeight: FontWeight.w600, ), - child: Text( - _tabData[index].sendButtonText, - style: TextStyle( - color: whiteColor, - fontSize: 16, - fontWeight: FontWeight.w600, - ), + ), + ), + ); + + case "Subscribe": + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 110), + child: MaterialButton( + onPressed: () {}, + color: Colors.blueAccent, + minWidth: 200, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8), + ), + child: Text( + sendButton, + style: TextStyle( + color: whiteColor, + fontSize: 16, + fontWeight: FontWeight.w600, ), ), ), - const SizedBox( - height: 40, + ); + + case "Call": + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 110), + child: MaterialButton( + onPressed: () {}, + color: Colors.blueAccent, + minWidth: 200, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8), + ), + child: Text( + sendButton, + style: TextStyle( + color: whiteColor, + fontSize: 16, + fontWeight: FontWeight.w600, + ), + ), ), - ], - ), - ); + ); + + case "Register": + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 110), + child: MaterialButton( + onPressed: () {}, + color: Colors.blueAccent, + minWidth: 200, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8), + ), + child: Text( + sendButton, + style: TextStyle( + color: whiteColor, + fontSize: 16, + fontWeight: FontWeight.w600, + ), + ), + ), + ); + + default: + return Container(); + } } // Topic and Procedure TextFormFields Widget - Widget buildTopicProcedure(String sendButtonText) { + Widget buildTopicProcedure(TextEditingController controller, String sendButtonText) { switch (sendButtonText) { case "Publish": return Padding( padding: const EdgeInsets.symmetric(horizontal: 15), child: TextFormField( - controller: topicProcedureController, + controller: controller, decoration: InputDecoration( hintText: "Enter topic here", labelText: "Enter topic here", @@ -391,7 +465,7 @@ class _MobileHomeScaffoldState extends State with TickerProv return Padding( padding: const EdgeInsets.symmetric(horizontal: 15), child: TextFormField( - controller: topicProcedureController, + controller: controller, decoration: InputDecoration( hintText: "Enter procedure here", labelText: "Enter procedure here", @@ -407,7 +481,7 @@ class _MobileHomeScaffoldState extends State with TickerProv return Padding( padding: const EdgeInsets.symmetric(horizontal: 15), child: TextFormField( - controller: topicProcedureController, + controller: controller, decoration: InputDecoration( hintText: "Enter procedure here", labelText: "Enter procedure here", @@ -423,7 +497,7 @@ class _MobileHomeScaffoldState extends State with TickerProv return Padding( padding: const EdgeInsets.symmetric(horizontal: 15), child: TextFormField( - controller: topicProcedureController, + controller: controller, decoration: InputDecoration( hintText: "Enter topic here", labelText: "Enter topic here", @@ -641,17 +715,4 @@ class _MobileHomeScaffoldState extends State with TickerProv return Container(); } } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(DiagnosticsProperty("linkController", linkController)) - ..add( - DiagnosticsProperty("realmController", realmController), - ) - ..add( - DiagnosticsProperty("topicProcedureController", topicProcedureController), - ); - } } diff --git a/lib/utils/args_screen.dart b/lib/utils/args_screen.dart index 7c04bc8..0feec5c 100644 --- a/lib/utils/args_screen.dart +++ b/lib/utils/args_screen.dart @@ -3,7 +3,6 @@ import "package:provider/provider.dart"; import "package:xconn_ui/Providers/args_provider.dart"; import "package:xconn_ui/constants.dart"; - class ArgsTextFormFields extends StatelessWidget { const ArgsTextFormFields({super.key}); diff --git a/lib/utils/kwargs_screen.dart b/lib/utils/kwargs_screen.dart index 9938a7f..4072071 100644 --- a/lib/utils/kwargs_screen.dart +++ b/lib/utils/kwargs_screen.dart @@ -48,10 +48,10 @@ class TableWidget extends StatefulWidget { class _TableWidgetState extends State { TableRow _buildTableRow( - Map rowData, - int index, - KwargsProvider kWarProvider, - ) { + Map rowData, + int index, + KwargsProvider kWarProvider, + ) { return TableRow( children: [ _buildTableCell( @@ -140,11 +140,11 @@ class _TableWidgetState extends State { ), ...widget.tableData.asMap().entries.map( (entry) => _buildTableRow( - entry.value, - entry.key, - Provider.of(context, listen: false), - ), - ), + entry.value, + entry.key, + Provider.of(context, listen: false), + ), + ), ], ); } diff --git a/lib/utils/tab_data_class.dart b/lib/utils/tab_data_class.dart index 1b89396..5ee26f4 100644 --- a/lib/utils/tab_data_class.dart +++ b/lib/utils/tab_data_class.dart @@ -1,5 +1,27 @@ +import "package:flutter/cupertino.dart"; + class TabData { + TabData() { + linkController.addListener(_linkControllerListener); + realmController.addListener(_realmControllerListener); + topicProcedureController.addListener(_topicProcedureControllerListener); + } String selectedValue = ""; String selectedSerializer = ""; String sendButtonText = "Send"; + TextEditingController linkController = TextEditingController(); + TextEditingController realmController = TextEditingController(); + TextEditingController topicProcedureController = TextEditingController(); + + void disposeControllers() { + linkController.dispose(); + realmController.dispose(); + topicProcedureController.dispose(); + } + + void _linkControllerListener() {} + + void _realmControllerListener() {} + + void _topicProcedureControllerListener() {} }