import 'package:doctor_app_flutter/routes.dart'; import 'package:flutter/material.dart'; import 'package:hexcolor/hexcolor.dart'; class PatientSearch extends StatefulWidget { @override _PatientSearchState createState() => _PatientSearchState(); } class _PatientSearchState extends State { final List> _items = [ {"text": "outPatiant1", "val": "1"}, {"text": "outPatiant3", "val": "3"}, {"text": "outPatiant2", "val": "2"}, ]; String _selectedItem = '2'; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Search Patient"), ), body: SingleChildScrollView( child: LayoutBuilder(builder: (ctx, constraints) { var smallScreenSize = 660; bool isSmallScreen = constraints.maxWidth <= smallScreenSize; return Container( padding: EdgeInsets.all(15), width: constraints.maxWidth * 0.9, child: Form( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Patiant Type', style: TextStyle(fontSize: 20), ), SizedBox( height: 15, ), Container( width: double.infinity, child: DropdownButton( value: _selectedItem, iconSize: 24, elevation: 16, selectedItemBuilder: (BuildContext context) { return _items.map((item) { return Text(item['text']); }).toList(); }, onChanged: (String newValue) => { setState(() { _selectedItem = newValue; }) }, items: _items.map((item) { return DropdownMenuItem( child: Text('${item['text']}'), value: item['val'], ); }).toList(), ), ), SizedBox( height: 15, ), Text( 'First Name', style: TextStyle(fontSize: 20), ), SizedBox( height: 15, ), TextFormField( decoration: InputDecoration( hintText: 'First Name', hintStyle: TextStyle( fontSize: isSmallScreen ? 14 : constraints.maxWidth * 0.024), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(20)), borderSide: BorderSide(color: Hexcolor('#CCCCCC')), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide( color: Theme.of(context).primaryColor), ) //BorderRadius.all(Radius.circular(20)); ), validator: (value) { if (value.isEmpty) { return 'Please enter some text'; } return null; }, ), SizedBox( height: 15, ), Text( 'Middle Name', style: TextStyle(fontSize: 20), ), SizedBox( height: 15, ), TextFormField( decoration: InputDecoration( hintText: 'Middle Name', hintStyle: TextStyle( fontSize: isSmallScreen ? 14 : constraints.maxWidth * 0.024), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(20)), borderSide: BorderSide(color: Hexcolor('#CCCCCC')), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide( color: Theme.of(context).primaryColor), ) //BorderRadius.all(Radius.circular(20)); ), validator: (value) { if (value.isEmpty) { return 'Please enter some text'; } return null; }, ), SizedBox( height: 15, ), Text( 'Last Name', style: TextStyle(fontSize: 20), ), SizedBox( height: 15, ), TextFormField( decoration: InputDecoration( hintText: 'Last Name', hintStyle: TextStyle( fontSize: isSmallScreen ? 14 : constraints.maxWidth * 0.024), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(20)), borderSide: BorderSide(color: Hexcolor('#CCCCCC')), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide( color: Theme.of(context).primaryColor), ) //BorderRadius.all(Radius.circular(20)); ), validator: (value) { if (value.isEmpty) { return 'Please enter some text'; } return null; }, ), SizedBox( height: 15, ), Text( 'Phone Number', style: TextStyle(fontSize: 20), ), SizedBox( height: 15, ), TextFormField( decoration: InputDecoration( hintText: 'Phone Number', hintStyle: TextStyle( fontSize: isSmallScreen ? 14 : constraints.maxWidth * 0.024), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(20)), borderSide: BorderSide(color: Hexcolor('#CCCCCC')), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide( color: Theme.of(context).primaryColor), ) //BorderRadius.all(Radius.circular(20)); ), validator: (value) { if (value.isEmpty) { return 'Please enter some text'; } return null; }, ), SizedBox( height: 15, ), // Container(child: GridView(gridDelegate: null,),) SizedBox( height: 15, ), Text( 'Patiant ID', style: TextStyle(fontSize: 20), ), SizedBox( height: 15, ), TextFormField( decoration: InputDecoration( hintText: 'Patiant ID', hintStyle: TextStyle( fontSize: isSmallScreen ? 14 : constraints.maxWidth * 0.024), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(20)), borderSide: BorderSide(color: Hexcolor('#CCCCCC')), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide( color: Theme.of(context).primaryColor), ) //BorderRadius.all(Radius.circular(20)); ), validator: (value) { if (value.isEmpty) { return 'Please enter some text'; } return null; }, ), SizedBox( height: 15, ), Text( 'Patiant File', style: TextStyle(fontSize: 20), ), SizedBox( height: 15, ), TextFormField( decoration: InputDecoration( hintText: 'Patiant File', hintStyle: TextStyle( fontSize: isSmallScreen ? 14 : constraints.maxWidth * 0.024), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(20)), borderSide: BorderSide(color: Hexcolor('#CCCCCC')), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide( color: Theme.of(context).primaryColor), ) //BorderRadius.all(Radius.circular(20)); ), validator: (value) { if (value.isEmpty) { return 'Please enter some text'; } return null; }, ), SizedBox( height: 15, ), Text( 'From', style: TextStyle(fontSize: 20), ), SizedBox( height: 15, ), TextFormField( decoration: InputDecoration( hintText: 'From', hintStyle: TextStyle( fontSize: isSmallScreen ? 14 : constraints.maxWidth * 0.024), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(20)), borderSide: BorderSide(color: Hexcolor('#CCCCCC')), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide( color: Theme.of(context).primaryColor), ) //BorderRadius.all(Radius.circular(20)); ), validator: (value) { if (value.isEmpty) { return 'Please enter some text'; } return null; }, ), SizedBox( height: 15, ),Text( 'TO', style: TextStyle(fontSize: 20), ), SizedBox( height: 15, ), TextFormField( decoration: InputDecoration( hintText: 'To', hintStyle: TextStyle( fontSize: isSmallScreen ? 14 : constraints.maxWidth * 0.024), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(20)), borderSide: BorderSide(color: Hexcolor('#CCCCCC')), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide( color: Theme.of(context).primaryColor), ) //BorderRadius.all(Radius.circular(20)); ), validator: (value) { if (value.isEmpty) { return 'Please enter some text'; } return null; }, ), SizedBox( height: 15, ), Container( child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ Checkbox( value: true, activeColor: Theme.of(context).primaryColor, onChanged: (bool newValue) {}), Text("Remember me", style: TextStyle(fontSize:isSmallScreen?18:constraints.maxWidth*0.018)), ], ),) ], ), ), ); }), )); } }