What's new

Flutter Help

Oden Sama

Forum Veteran
Established
Joined
May 30, 2016
Posts
935
Reaction
93
Points
991
ask lang, paano ko mapapalabas lahat ng pictures sa gallery dito sa ginawa kong gridview. parang yung example sa google lens.

eto yung code.

Container(
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), // Rounded corners
),
child: GridView.builder(
itemCount: 8,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
height: 50,
width: 50,
color: Colors.grey,
),
);
}
),
),
FB_IMG_1696691922877.jpg
Screenshot_2023-10-08-00-10-54-608_com.google.android.googlequicksearchbox.jpg

eto yung example.
 

Attachments

Para maipapakita ang mga larawan mula sa gallery sa grid view na iyong ginawa, kailangan mong gamitin ang package na image_picker upang makakuha ng mga larawan mula sa gallery. Sundan ang mga hakbang na ito:

1. I-install ang image_picker package sa iyong pubspec.yaml file. I-update ang file na ito:

YAML:
dependencies:
  flutter:
    sdk: flutter
  image_picker:

2. Importahin ang image_picker package sa iyong code:

Code:
import 'package:image_picker/image_picker.dart';

3. Gumawa ng isang list ng mga larawan na maglalaman ng mga file path ng mga napiling larawan:

Code:
List<File> images = [];

4. Magdagdag ng isang method na gagamitin para pumili ng mga larawan mula sa gallery:

Code:
Future<void> pickImages() async {
  final ImagePicker _picker = ImagePicker();
  
  final pickedFiles = await _picker.pickMultiImage();
  
  if (pickedFiles != null) {
    for (var pickedFile in pickedFiles) {
      images.add(File(pickedFile.path));
    }
    
    setState(() {});
  }
}

5. Palitan ang itemCount property ng GridView.builder na ginamit mo na 8 sa images.length. Ito ay magpapakita ng aktwal na bilang ng mga napiling larawan.

6. Sa itemBuilder ng GridView.builder, palitan ang Container na ginagamit mo na color: Colors.grey at idagdag ang mga larawan mula sa list ng mga larawan:

Code:
child: images.isNotEmpty
  ? Image.file(images[index], fit: BoxFit.cover)
  : Container(color: Colors.grey),

7. Sa Container ng GridView.builder, idagdag ang onTap property at tawagin ang pickImages method:

Code:
onTap: () {
  pickImages();
},

Narito ang buong code na binago:

Code:
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class GalleryPage extends StatefulWidget {
  @override
  _GalleryPageState createState() => _GalleryPageState();
}

class _GalleryPageState extends State<GalleryPage> {
  List<File> images = [];

  Future<void> pickImages() async {
    final ImagePicker _picker = ImagePicker();

    final pickedFiles = await _picker.pickMultiImage();

    if (pickedFiles != null) {
      for (var pickedFile in pickedFiles) {
        images.add(File(pickedFile.path));
      }

      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gallery')),
      body: Container(
        height: MediaQuery.of(context).size.height * 0.3,
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
        ),
        child: GridView.builder(
          itemCount: images.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
          itemBuilder: (context, index) {
            return GestureDetector(
              onTap: () {
                pickImages();
              },
              child: Padding(
                padding: const EdgeInsets.all(2.0),
                child: images.isNotEmpty
                    ? Image.file(images[index], fit: BoxFit.cover)
                    : Container(color: Colors.grey),
              ),
            );
          },
        ),
      ),
    );
  }
}

Kapag pindutin ang bawat grid item, bubuksan nito ang gallery at maaaring pumili ng mga larawan. Ang mga napiling larawan ay ipapakita sa grid view.
 
Para maipapakita ang mga larawan mula sa gallery sa grid view na iyong ginawa, kailangan mong gamitin ang package na image_picker upang makakuha ng mga larawan mula sa gallery. Sundan ang mga hakbang na ito:

1. I-install ang image_picker package sa iyong pubspec.yaml file. I-update ang file na ito:

YAML:
dependencies:
  flutter:
    sdk: flutter
  image_picker:

2. Importahin ang image_picker package sa iyong code:

Code:
import 'package:image_picker/image_picker.dart';

3. Gumawa ng isang list ng mga larawan na maglalaman ng mga file path ng mga napiling larawan:

Code:
List<File> images = [];

4. Magdagdag ng isang method na gagamitin para pumili ng mga larawan mula sa gallery:

Code:
Future<void> pickImages() async {
  final ImagePicker _picker = ImagePicker();
 
  final pickedFiles = await _picker.pickMultiImage();
 
  if (pickedFiles != null) {
    for (var pickedFile in pickedFiles) {
      images.add(File(pickedFile.path));
    }
   
    setState(() {});
  }
}

5. Palitan ang itemCount property ng GridView.builder na ginamit mo na 8 sa images.length. Ito ay magpapakita ng aktwal na bilang ng mga napiling larawan.

6. Sa itemBuilder ng GridView.builder, palitan ang Container na ginagamit mo na color: Colors.grey at idagdag ang mga larawan mula sa list ng mga larawan:

Code:
child: images.isNotEmpty
  ? Image.file(images[index], fit: BoxFit.cover)
  : Container(color: Colors.grey),

7. Sa Container ng GridView.builder, idagdag ang onTap property at tawagin ang pickImages method:

Code:
onTap: () {
  pickImages();
},

Narito ang buong code na binago:

Code:
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class GalleryPage extends StatefulWidget {
  @override
  _GalleryPageState createState() => _GalleryPageState();
}

class _GalleryPageState extends State<GalleryPage> {
  List<File> images = [];

  Future<void> pickImages() async {
    final ImagePicker _picker = ImagePicker();

    final pickedFiles = await _picker.pickMultiImage();

    if (pickedFiles != null) {
      for (var pickedFile in pickedFiles) {
        images.add(File(pickedFile.path));
      }

      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gallery')),
      body: Container(
        height: MediaQuery.of(context).size.height * 0.3,
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
        ),
        child: GridView.builder(
          itemCount: images.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
          itemBuilder: (context, index) {
            return GestureDetector(
              onTap: () {
                pickImages();
              },
              child: Padding(
                padding: const EdgeInsets.all(2.0),
                child: images.isNotEmpty
                    ? Image.file(images[index], fit: BoxFit.cover)
                    : Container(color: Colors.grey),
              ),
            );
          },
        ),
      ),
    );
  }
}

Kapag pindutin ang bawat grid item, bubuksan nito ang gallery at maaaring pumili ng mga larawan. Ang mga napiling larawan ay ipapakita sa grid view.
ang gusto ko kasi, nakikita na agad sa gridview yung bawat photo sa gallery. hindi na kaylangan pindutin. automatic na may laman agad ang gridview
 
ang gusto ko kasi, nakikita na agad sa gridview yung bawat photo sa gallery. hindi na kaylangan pindutin. automatic na may laman agad ang gridview
Kung gusto mo na agad makita ang mga larawan mula sa gallery sa grid view, maaari mong gawin ito sa pamamagitan ng pagkuha ng mga larawan mula sa gallery sa oras ng pag-initialize ng page. Sundan ang mga hakbang na ito:

1. Importahin ang mga kinakailangang packages:

Code:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

2. Gumawa ng isang list ng mga larawan na maglalaman ng mga file path ng mga napiling larawan:

Code:
List<File> images = [];

3. Gumawa ng isang method na gagamitin para kumuha ng mga larawan mula sa gallery:

Code:
Future<void> getGalleryImages() async {
  final ImagePicker _picker = ImagePicker();
 
  final pickedFiles = await _picker.pickMultiImage();
 
  if (pickedFiles != null) {
    for (var pickedFile in pickedFiles) {
      images.add(File(pickedFile.path));
    }
   
    setState(() {});
  }
}

4. Sa
Code:
initState
method, tawagin ang
Code:
getGalleryImages
para kunin ang mga larawan mula sa gallery sa pag-initialize ng page:

Code:
@override
void initState() {
  super.initState();
  getGalleryImages();
}

5. Sa
Code:
GridView.builder
, palitan ang
Code:
itemCount
property ng
Code:
images.length
upang ipakita ang aktwal na bilang ng mga larawan mula sa gallery.

6. Sa
Code:
itemBuilder
ng
Code:
GridView.builder
, palitan ang
Code:
Container
na ginagamit mo na
Code:
color: Colors.grey
at idagdag ang mga larawan mula sa list ng mga larawan:

Code:
child: images.isNotEmpty
  ? Image.file(images[index], fit: BoxFit.cover)
  : Container(color: Colors.grey),

Narito ang buong code na binago:

Code:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class GalleryPage extends StatefulWidget {
  @override
  _GalleryPageState createState() => _GalleryPageState();
}

class _GalleryPageState extends State<GalleryPage> {
  List<File> images = [];

  Future<void> getGalleryImages() async {
    final ImagePicker _picker = ImagePicker();

    final pickedFiles = await _picker.pickMultiImage();

    if (pickedFiles != null) {
      for (var pickedFile in pickedFiles) {
        images.add(File(pickedFile.path));
      }

      setState(() {});
    }
  }

  @override
  void initState() {
    super.initState();
    getGalleryImages();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gallery')),
      body: Container(
        height: MediaQuery.of(context).size.height * 0.3,
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
        ),
        child: GridView.builder(
          itemCount: images.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.all(2.0),
              child: images.isNotEmpty
                  ? Image.file(images[index], fit: BoxFit.cover)
                  : Container(color: Colors.grey),
            );
          },
        ),
      ),
    );
  }
}

Sa code na ito, tatawagin ang
Code:
getGalleryImages
method sa
Code:
initState
upang kunin ang mga larawan mula sa gallery sa pag-initialize ng page. Kapag ang page ay nag-load, ito ay magpapakita ng mga larawan mula sa gallery sa grid view.
 
Kung gusto mo na agad makita ang mga larawan mula sa gallery sa grid view, maaari mong gawin ito sa pamamagitan ng pagkuha ng mga larawan mula sa gallery sa oras ng pag-initialize ng page. Sundan ang mga hakbang na ito:

1. Importahin ang mga kinakailangang packages:

Code:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

2. Gumawa ng isang list ng mga larawan na maglalaman ng mga file path ng mga napiling larawan:

Code:
List<File> images = [];

3. Gumawa ng isang method na gagamitin para kumuha ng mga larawan mula sa gallery:

Code:
Future<void> getGalleryImages() async {
  final ImagePicker _picker = ImagePicker();
 
  final pickedFiles = await _picker.pickMultiImage();
 
  if (pickedFiles != null) {
    for (var pickedFile in pickedFiles) {
      images.add(File(pickedFile.path));
    }
  
    setState(() {});
  }
}

4. Sa
Code:
initState
method, tawagin ang
Code:
getGalleryImages
para kunin ang mga larawan mula sa gallery sa pag-initialize ng page:

Code:
@override
void initState() {
  super.initState();
  getGalleryImages();
}

5. Sa
Code:
GridView.builder
, palitan ang
Code:
itemCount
property ng
Code:
images.length
upang ipakita ang aktwal na bilang ng mga larawan mula sa gallery.

6. Sa
Code:
itemBuilder
ng
Code:
GridView.builder
, palitan ang
Code:
Container
na ginagamit mo na
Code:
color: Colors.grey
at idagdag ang mga larawan mula sa list ng mga larawan:

Code:
child: images.isNotEmpty
  ? Image.file(images[index], fit: BoxFit.cover)
  : Container(color: Colors.grey),

Narito ang buong code na binago:

Code:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class GalleryPage extends StatefulWidget {
  @override
  _GalleryPageState createState() => _GalleryPageState();
}

class _GalleryPageState extends State<GalleryPage> {
  List<File> images = [];

  Future<void> getGalleryImages() async {
    final ImagePicker _picker = ImagePicker();

    final pickedFiles = await _picker.pickMultiImage();

    if (pickedFiles != null) {
      for (var pickedFile in pickedFiles) {
        images.add(File(pickedFile.path));
      }

      setState(() {});
    }
  }

  @override
  void initState() {
    super.initState();
    getGalleryImages();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gallery')),
      body: Container(
        height: MediaQuery.of(context).size.height * 0.3,
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
        ),
        child: GridView.builder(
          itemCount: images.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.all(2.0),
              child: images.isNotEmpty
                  ? Image.file(images[index], fit: BoxFit.cover)
                  : Container(color: Colors.grey),
            );
          },
        ),
      ),
    );
  }
}

Sa code na ito, tatawagin ang
Code:
getGalleryImages
method sa
Code:
initState
upang kunin ang mga larawan mula sa gallery sa pag-initialize ng page. Kapag ang page ay nag-load, ito ay magpapakita ng mga larawan mula sa gallery sa grid view.
paki revise ng code ko.

// ignore_for_file: unused_import, library_private_types_in_public_api, prefer_final_fields, prefer_const_constructors, prefer_const_literals_to_create_immutables, sdk_version_ui_as_code
import 'package:color_blindness/color_blindness.dart';
import 'package:colorapp/function/deuteranopia.dart';
import 'package:colorapp/function/protanopia.dart';
import 'package:colorapp/function/tritanopia.dart';
import 'package:image_picker/image_picker.dart';
import 'package:colorapp/widget/contact.dart';
import 'package:colorapp/widget/guide.dart';
import 'package:colorapp/widget/info.dart';
import 'package:colorapp/widget/privacy_policy.dart';
import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:url_launcher/url_launcher.dart';
import 'dart:io';
import 'package:colorapp/global.dart';
import 'color_palette.dart';
import 'package:colorapp/function/camera.dart';
class HomePage extends StatefulWidget {
const HomePage({
Key? key,
required this.toggleDarkMode,
required this.currentTheme,
}) : super(key: key);
final Function() toggleDarkMode;
final ThemeData currentTheme;
Override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
bool _isMenuOpen = false;
bool _isSettingsOpen = false;
bool _isDarkModeEnabled = false; // Track dark mode state
bool _isButtonClicked = false;

void _toggleMenu() {
setState(() {
_isMenuOpen = !_isMenuOpen;
_isSettingsOpen = false; // Close settings if open
if (_isMenuOpen) {
_scaffoldKey.currentState?.openDrawer();
} else {
_scaffoldKey.currentState?.openEndDrawer();
}
});
}
void _toggleSettings() {
setState(() {
_isSettingsOpen = !_isSettingsOpen;
_isMenuOpen = false; // Close menu if open
if (_isSettingsOpen) {
_scaffoldKey.currentState?.openEndDrawer();
} else {
_scaffoldKey.currentState?.openDrawer();
}
});
}
void _toggleDarkMode() {
setState(() {
_isDarkModeEnabled = !_isDarkModeEnabled;
});
}
Override
Widget build(BuildContext context) {
return MaterialApp(
theme: _isDarkModeEnabled ? ThemeData.dark() : ThemeData.light(),
home: Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: const Text('Dye It'),
backgroundColor: Colors.deepPurple,
titleTextStyle: const TextStyle(fontFamily: 'RobotoMono', fontSize: 24),
),
bottomNavigationBar: CurvedNavigationBar(
backgroundColor: Colors.deepPurple,
buttonBackgroundColor: _isDarkModeEnabled ? Colors.grey : null,
animationDuration: const Duration(milliseconds: 200),
items: [
Icon(Icons.menu, color: _isDarkModeEnabled ? Colors.black : null),
Icon(Icons.home, color: _isDarkModeEnabled ? Colors.black : null),
Icon(Icons.settings, color: _isDarkModeEnabled ? Colors.black : null),
],
onTap: (index) {
if (index == 0) {
_toggleMenu();
} else if (index == 1) {
_isMenuOpen = false;
_isSettingsOpen = false;
setState(() {});
} else if (index == 2) {
_toggleSettings();
}
},
),
body: Stack(
children: [
// Add the code you want here
Opacity(
opacity: _isMenuOpen || _isSettingsOpen ? 0.7 : 1.0,
child: Container(
color: _isMenuOpen || _isSettingsOpen ? Colors.black : null,
),
),
Column(
children: [
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CameraScreen(),
),
);
},
child: Container(
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.deepPurple,
),
child: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.camera,
color: Colors.white,
size: 48, // Adjust the size as needed
),
SizedBox(height: 10),
Text(
'CAMERA',
style: TextStyle(color: Colors.white, fontSize: 22),
),
],
),
),
),
),
SizedBox(
height: 5,
),

Container(
margin: EdgeInsets.all(5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
OutlinedButton(
onPressed: () {
// Navigate to TritanopiaPage with a cool animation
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) {
return FadeTransition(
opacity: animation,
child: TritanopiaPage(), // Navigate to TritanopiaPage
);
},
transitionDuration: Duration(milliseconds: 300), // Animation duration
),
);
},
style: OutlinedButton.styleFrom(
side: BorderSide(color: Colors.deepPurple),
backgroundColor: _isButtonClicked ? Colors.deepPurple : Colors.transparent,
),
child: Text('Tritanopia'),
),

OutlinedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DeuteranopiaPage(), // Replace with your actual screen name
),
);
},
style: OutlinedButton.styleFrom(
side: BorderSide(color: Colors.deepPurple),
backgroundColor: _isButtonClicked ? Colors.deepPurple : Colors.transparent,
),
child: Text('Deuteranopia'),
),


OutlinedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProtanopiaPage(), // Replace with your actual screen name
),
);
},
style: OutlinedButton.styleFrom(
side: BorderSide(color: Colors.deepPurple),
backgroundColor: _isButtonClicked ? Colors.deepPurple : Colors.transparent,
),
child: Text('Protanopia'),
),
],
),
),
Divider(
color: _isDarkModeEnabled ? Colors.white : Colors.black,
),

Container(
margin: EdgeInsets.symmetric(horizontal: 5), // Adjust the margin as needed
child: Row(
mainAxisAlignment: MainAxisAlignment.start, // Align buttons to the left
children: [
PopupMenuButton<String>(
onSelected: (String value) {
// Add your functionality for the first button here based on the selected value
},
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: 'Option 1',
child: Text('Option 1'),
),
PopupMenuItem<String>(
value: 'Option 2',
child: Text('Option 2'),
),
// Add more options as needed
],
child: ElevatedButton(
onPressed: null, // Disable the button because it triggers the popup
style: ElevatedButton.styleFrom(
primary: Colors.deepPurple, // Button background color
),
child: Text('Button 1'),
),
),
SizedBox(width: 225), // Add spacing between buttons
TextButton(
onPressed: () {
// Add your functionality for the second button here
},
style: TextButton.styleFrom(
primary: Colors.deepPurple, // Button text color
),
child: Text('Button 2'),
),
],
),
),

Container(
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), // Rounded corners
),
child: GridView.builder(
itemCount: 8,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
height: 50,
width: 50,
color: Colors.grey,
),
);
}
),
),


],
),
if (_isMenuOpen || _isSettingsOpen)
GestureDetector(
onTap: () {
_isMenuOpen = false;
_isSettingsOpen = false;
setState(() {});
},
child: Container(
color: Colors.black.withOpacity(0.7),
),
),
if (_isMenuOpen)
Positioned(
left: 0,
top: 0,
bottom: 0,
width: 200,
child: Drawer(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(5),
child: ElevatedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.person),
SizedBox(width: 8),
Text(
'Sign Up',
style: TextStyle(fontSize: 20),
),
],
),
),
),
Divider(
color: _isDarkModeEnabled ? Colors.white : Colors.black,
),
ListTile(
title: Text('Color Palette'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ColorPalettePage(
isDarkModeEnabled: _isDarkModeEnabled,
),
),
);
},
),
ListTile(
title: Text('About Us'),
),
ListTile(
title: Text('Privacy Policy'),
),
],
),
),
),
if (_isSettingsOpen)
Positioned(
right: 0,
top: 0,
bottom: 0,
width: 200,
child: Drawer(
child: Column(
children: <Widget>[
Expanded(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
ListTile(
title: Text('DarkMode'),
trailing: Switch(
value: _isDarkModeEnabled,
onChanged: (value) {
_toggleDarkMode();
},
),
),
Divider(
color: _isDarkModeEnabled
? Colors.white
: Colors.black,
),
ListTile(
title: Text('Guide'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => GuidePage(),
),
);
},
),
ListTile(
title: Text('Information'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => InfoPage(
isDarkModeEnabled: _isDarkModeEnabled,
),
),
);
},
),
ListTile(
title: Text('About Us'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ContactPage(),
),
);
},
),
ListTile(
title: Text('Privacy Policy'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
PrivacyPolicyPage(),
),
);
},
),
],
),
),
],
),
),
),
],
),
),
);
}
}
 
paki ayos naman po itong code, ang gusto ko mangyare ay kapag pinindot ako ang container na ito, gagamit sya ng animatesize at lumaki ng 90% height ng screen
Column(
children: [
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CameraScreen(),
),
);
},
child: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.deepPurple,
),
child: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.camera,
color: Colors.white,
size: 48, // Adjust the size as needed
),
SizedBox(height: 10),
Text(
'CAMERA',
style: TextStyle(color: Colors.white, fontSize: 22),
),
],
),
),
),
),
),
 
Ang code na ibinigay mo ay hindi gumagamit ng AnimatedSize para palakihin ang laki ng container. Ngunit, maaari kong ipakita sa iyo kung paano ito gawin gamit ang AnimatedSize.

Una, siguraduhin na naka-import mo ang package:flutter/material.dart sa umpisa ng file:

Code:
import 'package:flutter/material.dart';

Pagkatapos, magdagdag ng mga sumusunod na variable sa simula ng StatefulWidget:

Code:
bool isExpanded = false;

Pagkatapos nito, i-edit ang onTap callback ng GestureDetector:

Code:
onTap: () {
  setState(() {
    isExpanded = !isExpanded;
  });
},

Pagkatapos ng GestureDetector, dagdagan ang AnimatedSize widget:

Code:
AnimatedSize(
  vsync: this,
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  child: Container(
    height: isExpanded ? MediaQuery.of(context).size.height * 0.9 : MediaQuery.of(context).size.height * 0.3,
    width: MediaQuery.of(context).size.width,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20),
      color: Colors.deepPurple,
    ),
    child: const Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.camera,
            color: Colors.white,
            size: 48,
          ),
          SizedBox(height: 10),
          Text(
            'CAMERA',
            style: TextStyle(color: Colors.white, fontSize: 22),
          ),
        ],
      ),
    ),
  ),
)

Sa code na ito, ang AnimatedSize widget ay nagbabago ng laki ng container depende sa value ng isExpanded variable. Kapag isExpanded ay true, ang height ng container ay ginawang 90% ng height ng screen (MediaQuery.of(context).size.height * 0.9), ngunit kapag isExpanded ay false, ang height ng container ay ginawang 30% ng height ng screen (MediaQuery.of(context).size.height * 0.3).

Huwag kalimutan na i-implement ang TickerProviderStateMixin sa class ng StatefulWidget para magamit ang vsync parameter ng AnimatedSize.

Ito ang kabuuang code pagkatapos ng mga pagbabago:

Code:
import 'package:flutter/material.dart';

class ExampleWidget extends StatefulWidget {
  @override
  _ExampleWidgetState createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> with TickerProviderStateMixin {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: () {
            setState(() {
              isExpanded = !isExpanded;
            });
          },
          child: AnimatedSize(
            vsync: this,
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
            child: Container(
              height: isExpanded ? MediaQuery.of(context).size.height * 0.9 : MediaQuery.of(context).size.height * 0.3,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.deepPurple,
              ),
              child: const Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.camera,
                      color: Colors.white,
                      size: 48,
                    ),
                    SizedBox(height: 10),
                    Text(
                      'CAMERA',
                      style: TextStyle(color: Colors.white, fontSize: 22),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Dapat ay mai-implement mo rin ang CameraScreen widget at hindi ko alam kung paano mo ito ginawa, kaya hindi ito kasama sa ibinigay kong code.
 
Ang code na ibinigay mo ay hindi gumagamit ng AnimatedSize para palakihin ang laki ng container. Ngunit, maaari kong ipakita sa iyo kung paano ito gawin gamit ang AnimatedSize.

Una, siguraduhin na naka-import mo ang package:flutter/material.dart sa umpisa ng file:

Code:
import 'package:flutter/material.dart';

Pagkatapos, magdagdag ng mga sumusunod na variable sa simula ng StatefulWidget:

Code:
bool isExpanded = false;

Pagkatapos nito, i-edit ang onTap callback ng GestureDetector:

Code:
onTap: () {
  setState(() {
    isExpanded = !isExpanded;
  });
},

Pagkatapos ng GestureDetector, dagdagan ang AnimatedSize widget:

Code:
AnimatedSize(
  vsync: this,
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  child: Container(
    height: isExpanded ? MediaQuery.of(context).size.height * 0.9 : MediaQuery.of(context).size.height * 0.3,
    width: MediaQuery.of(context).size.width,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20),
      color: Colors.deepPurple,
    ),
    child: const Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.camera,
            color: Colors.white,
            size: 48,
          ),
          SizedBox(height: 10),
          Text(
            'CAMERA',
            style: TextStyle(color: Colors.white, fontSize: 22),
          ),
        ],
      ),
    ),
  ),
)

Sa code na ito, ang AnimatedSize widget ay nagbabago ng laki ng container depende sa value ng isExpanded variable. Kapag isExpanded ay true, ang height ng container ay ginawang 90% ng height ng screen (MediaQuery.of(context).size.height * 0.9), ngunit kapag isExpanded ay false, ang height ng container ay ginawang 30% ng height ng screen (MediaQuery.of(context).size.height * 0.3).

Huwag kalimutan na i-implement ang TickerProviderStateMixin sa class ng StatefulWidget para magamit ang vsync parameter ng AnimatedSize.

Ito ang kabuuang code pagkatapos ng mga pagbabago:

Code:
import 'package:flutter/material.dart';

class ExampleWidget extends StatefulWidget {
  @override
  _ExampleWidgetState createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> with TickerProviderStateMixin {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: () {
            setState(() {
              isExpanded = !isExpanded;
            });
          },
          child: AnimatedSize(
            vsync: this,
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
            child: Container(
              height: isExpanded ? MediaQuery.of(context).size.height * 0.9 : MediaQuery.of(context).size.height * 0.3,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.deepPurple,
              ),
              child: const Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.camera,
                      color: Colors.white,
                      size: 48,
                    ),
                    SizedBox(height: 10),
                    Text(
                      'CAMERA',
                      style: TextStyle(color: Colors.white, fontSize: 22),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Dapat ay mai-implement mo rin ang CameraScreen widget at hindi ko alam kung paano mo ito ginawa, kaya hindi ito kasama sa ibinigay kong code.
error ang vsync
 
error ang vsync
Ang error ng "vsync" ay sanhi ng hindi pagkakasama ng "TickerProvider" sa class ng "StatefulWidget". Upang malunasan ang error na ito, maaari mong i-implement ang "SingleTickerProviderStateMixin" sa class ng "StatefulWidget". Narito ang updated na code:

Code:
import 'package:flutter/material.dart';

class ExampleWidget extends StatefulWidget {
  @override
  _ExampleWidgetState createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> with SingleTickerProviderStateMixin {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: () {
            setState(() {
              isExpanded = !isExpanded;
            });
          },
          child: AnimatedSize(
            vsync: this,
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
            child: Container(
              height: isExpanded ? MediaQuery.of(context).size.height * 0.9 : MediaQuery.of(context).size.height * 0.3,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.deepPurple,
              ),
              child: const Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.camera,
                      color: Colors.white,
                      size: 48,
                    ),
                    SizedBox(height: 10),
                    Text(
                      'CAMERA',
                      style: TextStyle(color: Colors.white, fontSize: 22),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Sa code na ito, ang SingleTickerProviderStateMixin ay inimplement sa _ExampleWidgetState class upang maging available ang vsync parameter ng AnimatedSize. Dapat mo rin i-import ang package:flutter/material.dart sa simula ng file.

Pakiusap tandaan na dapat ay mai-implement mo rin ang CameraScreen widget, na wala sa ibinigay mong code, upang hindi magkaroon ng error o issue sa iyong application.
 
Ang error ng "vsync" ay sanhi ng hindi pagkakasama ng "TickerProvider" sa class ng "StatefulWidget". Upang malunasan ang error na ito, maaari mong i-implement ang "SingleTickerProviderStateMixin" sa class ng "StatefulWidget". Narito ang updated na code:

Code:
import 'package:flutter/material.dart';

class ExampleWidget extends StatefulWidget {
  @override
  _ExampleWidgetState createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> with SingleTickerProviderStateMixin {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: () {
            setState(() {
              isExpanded = !isExpanded;
            });
          },
          child: AnimatedSize(
            vsync: this,
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
            child: Container(
              height: isExpanded ? MediaQuery.of(context).size.height * 0.9 : MediaQuery.of(context).size.height * 0.3,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.deepPurple,
              ),
              child: const Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.camera,
                      color: Colors.white,
                      size: 48,
                    ),
                    SizedBox(height: 10),
                    Text(
                      'CAMERA',
                      style: TextStyle(color: Colors.white, fontSize: 22),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Sa code na ito, ang SingleTickerProviderStateMixin ay inimplement sa _ExampleWidgetState class upang maging available ang vsync parameter ng AnimatedSize. Dapat mo rin i-import ang package:flutter/material.dart sa simula ng file.

Pakiusap tandaan na dapat ay mai-implement mo rin ang CameraScreen widget, na wala sa ibinigay mong code, upang hindi magkaroon ng error o issue sa iyong application.
paki edit po ito. mag dadagdag lang ako ng function na kapag pinindot ang container, mag oopen ang camera ng device at may capture button ito may switch camera(front camera or rear camera) and flashlight

SingleChildScrollView(
child: Column(
children: [
GestureDetector(
onTap: () {
setState(() {
isExpanded = !isExpanded;
});
},
child: AnimatedSize(
duration: const Duration(milliseconds: 200
),
curve: Curves.easeInOut,
child: Container(
height: isExpanded ? MediaQuery.of(context).size.height * 0.7 : MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.deepPurple,
),

child: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.camera,
color: Colors.white,
size: 48,
),
SizedBox(height: 10),
Text('CAMERA',
style: TextStyle(color: Colors.white, fontSize: 22),)
],
),
),
),
),
),
 
paki edit po ito. mag dadagdag lang ako ng function na kapag pinindot ang container, mag oopen ang camera ng device at may capture button ito may switch camera(front camera or rear camera) and flashlight

SingleChildScrollView(
child: Column(
children: [
GestureDetector(
onTap: () {
setState(() {
isExpanded = !isExpanded;
});
},
child: AnimatedSize(
duration: const Duration(milliseconds: 200
),
curve: Curves.easeInOut,
child: Container(
height: isExpanded ? MediaQuery.of(context).size.height * 0.7 : MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.deepPurple,
),

child: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.camera,
color: Colors.white,
size: 48,
),
SizedBox(height: 10),
Text('CAMERA',
style: TextStyle(color: Colors.white, fontSize: 22),)
],
),
),
),
),
),
 
Sure! Here's the edited code with the added function to open the device's camera and switch between front and rear cameras, along with a capture button and flashlight:

Code:
import 'package:camera/camera.dart';
import 'package:flutter/material.dart';

class CameraScreen extends StatefulWidget {
  @override
  _CameraScreenState createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> {
  CameraController? _controller;
  Future<void>? _initializeControllerFuture;
  bool _isFrontCamera = false;
  bool _isFlashOn = false;

  @override
  void initState() {
    super.initState();
    _initializeCamera();
  }

  Future<void> _initializeCamera() async {
    final cameras = await availableCameras();
    final camera = _isFrontCamera ? cameras.last : cameras.first;

    _controller = CameraController(camera, ResolutionPreset.high);
    _initializeControllerFuture = _controller?.initialize();

    if (mounted) {
      setState(() {});
    }
  }

  Future<void> _toggleCamera() async {
    await _controller?.dispose();
    _isFrontCamera = !_isFrontCamera;
    _initializeCamera();
  }

  Future<void> _toggleFlash() async {
    if (_isFlashOn) {
      await _controller?.setFlashMode(FlashMode.off);
    } else {
      await _controller?.setFlashMode(FlashMode.torch);
    }
    _isFlashOn = !_isFlashOn;
    setState(() {});
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    bool isExpanded = false;

    return SingleChildScrollView(
      child: Column(
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                isExpanded = !isExpanded;
              });
            },
            child: AnimatedSize(
              duration: const Duration(milliseconds: 200),
              curve: Curves.easeInOut,
              child: Container(
                height: isExpanded ? MediaQuery.of(context).size.height * 0.7 : MediaQuery.of(context).size.height * 0.3,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.deepPurple,
                ),
                child: _controller != null && _controller!.value.isInitialized
                    ? Stack(
                        children: [
                          CameraPreview(_controller!),
                          Align(
                            alignment: Alignment.topRight,
                            child: IconButton(
                              icon: Icon(
                                _isFlashOn ? Icons.flash_off : Icons.flash_on,
                                color: Colors.white,
                              ),
                              onPressed: _toggleFlash,
                            ),
                          ),
                          Align(
                            alignment: Alignment.bottomCenter,
                            child: Padding(
                              padding: const EdgeInsets.all(16),
                              child: ElevatedButton(
                                onPressed: () {
                                  // Capture logic here
                                },
                                child: Icon(
                                  Icons.camera,
                                  size: 48,
                                ),
                                style: ButtonStyle(
                                  shape: MaterialStateProperty.all<CircleBorder>(
                                    CircleBorder(),
                                  ),
                                  padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
                                    EdgeInsets.all(16),
                                  ),
                                  backgroundColor: MaterialStateProperty.all<Color>(
                                    Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      )
                    : Center(
                        child: CircularProgressIndicator(),
                      ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Make sure to add the camera package to your pubspec.yaml file:

YAML:
dependencies:
  camera: ^0.10.0

Please note that you may need to adjust the code according to your specific requirements and use the appropriate package for camera functionality in your app.
 
Sure! Here's the edited code with the added function to open the device's camera and switch between front and rear cameras, along with a capture button and flashlight:

Code:
import 'package:camera/camera.dart';
import 'package:flutter/material.dart';

class CameraScreen extends StatefulWidget {
  @override
  _CameraScreenState createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> {
  CameraController? _controller;
  Future<void>? _initializeControllerFuture;
  bool _isFrontCamera = false;
  bool _isFlashOn = false;

  @override
  void initState() {
    super.initState();
    _initializeCamera();
  }

  Future<void> _initializeCamera() async {
    final cameras = await availableCameras();
    final camera = _isFrontCamera ? cameras.last : cameras.first;

    _controller = CameraController(camera, ResolutionPreset.high);
    _initializeControllerFuture = _controller?.initialize();

    if (mounted) {
      setState(() {});
    }
  }

  Future<void> _toggleCamera() async {
    await _controller?.dispose();
    _isFrontCamera = !_isFrontCamera;
    _initializeCamera();
  }

  Future<void> _toggleFlash() async {
    if (_isFlashOn) {
      await _controller?.setFlashMode(FlashMode.off);
    } else {
      await _controller?.setFlashMode(FlashMode.torch);
    }
    _isFlashOn = !_isFlashOn;
    setState(() {});
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    bool isExpanded = false;

    return SingleChildScrollView(
      child: Column(
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                isExpanded = !isExpanded;
              });
            },
            child: AnimatedSize(
              duration: const Duration(milliseconds: 200),
              curve: Curves.easeInOut,
              child: Container(
                height: isExpanded ? MediaQuery.of(context).size.height * 0.7 : MediaQuery.of(context).size.height * 0.3,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.deepPurple,
                ),
                child: _controller != null && _controller!.value.isInitialized
                    ? Stack(
                        children: [
                          CameraPreview(_controller!),
                          Align(
                            alignment: Alignment.topRight,
                            child: IconButton(
                              icon: Icon(
                                _isFlashOn ? Icons.flash_off : Icons.flash_on,
                                color: Colors.white,
                              ),
                              onPressed: _toggleFlash,
                            ),
                          ),
                          Align(
                            alignment: Alignment.bottomCenter,
                            child: Padding(
                              padding: const EdgeInsets.all(16),
                              child: ElevatedButton(
                                onPressed: () {
                                  // Capture logic here
                                },
                                child: Icon(
                                  Icons.camera,
                                  size: 48,
                                ),
                                style: ButtonStyle(
                                  shape: MaterialStateProperty.all<CircleBorder>(
                                    CircleBorder(),
                                  ),
                                  padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
                                    EdgeInsets.all(16),
                                  ),
                                  backgroundColor: MaterialStateProperty.all<Color>(
                                    Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      )
                    : Center(
                        child: CircularProgressIndicator(),
                      ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Make sure to add the camera package to your pubspec.yaml file:

YAML:
dependencies:
  camera: ^0.10.0

Please note that you may need to adjust the code according to your specific requirements and use the appropriate package for camera functionality in your app.
paki revise po ng code ko
// ignore_for_file: unused_import, library_private_types_in_public_api, prefer_final_fields, prefer_const_constructors, prefer_const_literals_to_create_immutables, sdk_version_ui_as_code
import 'package:color_blindness/color_blindness.dart';
import 'package:colorapp/function/deuteranopia.dart';
import 'package:colorapp/function/protanopia.dart';
import 'package:colorapp/function/tritanopia.dart';
import 'package:image_picker/image_picker.dart';
import 'package:colorapp/widget/contact.dart';
import 'package:colorapp/widget/guide.dart';
import 'package:colorapp/widget/info.dart';
import 'package:colorapp/widget/privacy_policy.dart';
import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:url_launcher/url_launcher.dart';
import 'dart:io';
import 'package:colorapp/global.dart';
import 'color_palette.dart';
import 'package:colorapp/function/camera.dart';
import 'package:colorapp/widget/gallery.dart';

class HomePage extends StatefulWidget {
const HomePage({
Key? key,
required this.toggleDarkMode,
required this.currentTheme,
}) : super(key: key);
final Function() toggleDarkMode;
final ThemeData currentTheme;
Override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
bool _isMenuOpen = false;
bool _isSettingsOpen = false;
bool _isDarkModeEnabled = false; // Track dark mode state
bool _isButtonClicked = false;
bool isExpanded = false;

void _toggleMenu() {
setState(() {
_isMenuOpen = !_isMenuOpen;
_isSettingsOpen = false; // Close settings if open
if (_isMenuOpen) {
_scaffoldKey.currentState?.openDrawer();
} else {
_scaffoldKey.currentState?.openEndDrawer();
}
});
}
void _toggleSettings() {
setState(() {
_isSettingsOpen = !_isSettingsOpen;
_isMenuOpen = false; // Close menu if open
if (_isSettingsOpen) {
_scaffoldKey.currentState?.openEndDrawer();
} else {
_scaffoldKey.currentState?.openDrawer();
}
});
}
void _toggleDarkMode() {
setState(() {
_isDarkModeEnabled = !_isDarkModeEnabled;
});
}

Override
Widget build(BuildContext context) {
return MaterialApp(
theme: _isDarkModeEnabled ? ThemeData.dark() : ThemeData.light(),
home: Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: const Text('Dye It'),
backgroundColor: Colors.deepPurple,
titleTextStyle: const TextStyle(fontFamily: 'RobotoMono', fontSize: 24),
),
bottomNavigationBar: CurvedNavigationBar(
backgroundColor: Colors.deepPurple,
buttonBackgroundColor: _isDarkModeEnabled ? Colors.grey : null,
animationDuration: const Duration(milliseconds: 200),
items: [
Icon(Icons.menu, color: _isDarkModeEnabled ? Colors.black : null),
Icon(Icons.home, color: _isDarkModeEnabled ? Colors.black : null),
Icon(Icons.settings, color: _isDarkModeEnabled ? Colors.black : null),
],
onTap: (index) {
if (index == 0) {
_toggleMenu();
} else if (index == 1) {
_isMenuOpen = false;
_isSettingsOpen = false;
setState(() {});
} else if (index == 2) {
_toggleSettings();
}
},
),
body: Stack(
children: [
// Add the code you want here
Opacity(
opacity: _isMenuOpen || _isSettingsOpen ? 0.7 : 1.0,
child: Container(
color: _isMenuOpen || _isSettingsOpen ? Colors.black : null,
),
),
SingleChildScrollView(
child: Column(
children: [
GestureDetector(
onTap: () {
setState(() {
isExpanded = !isExpanded;
});
},
child: AnimatedSize(
duration: const Duration(milliseconds: 200
),
curve: Curves.easeInOut,
child: Container(
height: isExpanded ? MediaQuery.of(context).size.height * 0.7 : MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.deepPurple,
),

child: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.camera,
color: Colors.white,
size: 48,
),
SizedBox(height: 10),
Text('CAMERA',
style: TextStyle(color: Colors.white, fontSize: 22),)
],
),
),
),
),
),

SizedBox(
height: 5,
),


Container(
margin: EdgeInsets.all(5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
OutlinedButton(
onPressed: () {
// Navigate to TritanopiaPage with a cool animation
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) {
return FadeTransition(
opacity: animation,
child: TritanopiaPage(), // Navigate to TritanopiaPage
);
},
transitionDuration: Duration(milliseconds: 300), // Animation duration
),
);
},
style: OutlinedButton.styleFrom(
side: BorderSide(color: Colors.deepPurple),
backgroundColor: _isButtonClicked ? Colors.deepPurple : Colors.transparent,
),
child: Text('Tritanopia'),
),


OutlinedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DeuteranopiaPage(), // Replace with your actual screen name
),
);
},
style: OutlinedButton.styleFrom(
side: BorderSide(color: Colors.deepPurple),
backgroundColor: _isButtonClicked ? Colors.deepPurple : Colors.transparent,
),
child: Text('Deuteranopia'),
),



OutlinedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProtanopiaPage(), // Replace with your actual screen name
),
);
},
style: OutlinedButton.styleFrom(
side: BorderSide(color: Colors.deepPurple),
backgroundColor: _isButtonClicked ? Colors.deepPurple : Colors.transparent,
),
child: Text('Protanopia'),
),

],
),
),

Divider(
color: _isDarkModeEnabled ? Colors.white : Colors.black,
),


Container(
margin: EdgeInsets.symmetric(horizontal: 5), // Adjust the margin as needed
child: Row(
mainAxisAlignment: MainAxisAlignment.start, // Align buttons to the left
children: [
PopupMenuButton<String>(
onSelected: (String value) {
// Add your functionality for the first button here based on the selected value
},
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: 'Option 1',
child: Text('Option 1'),
),
PopupMenuItem<String>(
value: 'Option 2',
child: Text('Option 2'),
),
// Add more options as needed
],
child: ElevatedButton(
onPressed: null, // Disable the button because it triggers the popup
style: ElevatedButton.styleFrom(
primary: Colors.deepPurple, // Button background color
),
child: Text('Button 1'),
),
),
SizedBox(width: 225), // Add spacing between buttons
TextButton(
onPressed: () {
// Add your functionality for the second button here
},
style: TextButton.styleFrom(
primary: Colors.deepPurple, // Button text color
),
child: Text('Button 2'),
),
],
),
),


Container(
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), // Rounded corners
),
child: GridView.builder(
itemCount: 16,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
height: 50,
width: 50,
color: Colors.grey,
),
);
}
),
),



],
),
),
if (_isMenuOpen || _isSettingsOpen)
GestureDetector(
onTap: () {
_isMenuOpen = false;
_isSettingsOpen = false;
setState(() {});
},
child: Container(
color: Colors.black.withOpacity(0.7),
),
),
if (_isMenuOpen)
Positioned(
left: 0,
top: 0,
bottom: 0,
width: 200,
child: Drawer(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(5),
child: ElevatedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.person),
SizedBox(width: 8),
Text(
'Sign Up',
style: TextStyle(fontSize: 20),
),
],
),
),
),
Divider(
color: _isDarkModeEnabled ? Colors.white : Colors.black,
),
ListTile(
title: Text('Color Palette'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ColorPalettePage(
isDarkModeEnabled: _isDarkModeEnabled,
),
),
);
},
),
ListTile(
title: Text('About Us'),
),
ListTile(
title: Text('Privacy Policy'),
),
],
),
),
),
if (_isSettingsOpen)
Positioned(
right: 0,
top: 0,
bottom: 0,
width: 200,
child: Drawer(
child: Column(
children: <Widget>[
Expanded(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
ListTile(
title: Text('DarkMode'),
trailing: Switch(
value: _isDarkModeEnabled,
onChanged: (value) {
_toggleDarkMode();
},
),
),
Divider(
color: _isDarkModeEnabled
? Colors.white
: Colors.black,
),
ListTile(
title: Text('Guide'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => GuidePage(),
),
);
},
),
ListTile(
title: Text('Information'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => InfoPage(
isDarkModeEnabled: _isDarkModeEnabled,
),
),
);
},
),
ListTile(
title: Text('About Us'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ContactPage(),
),
);
},
),
ListTile(
title: Text('Privacy Policy'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
PrivacyPolicyPage(),
),
);
},
),
],
),
),
],
),
),
),
],
),
),
);
}
}
 
Sure! Here's the edited code with the added function to open the device's camera and switch between front and rear cameras, along with a capture button and flashlight:

Code:
import 'package:camera/camera.dart';
import 'package:flutter/material.dart';

class CameraScreen extends StatefulWidget {
  @override
  _CameraScreenState createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> {
  CameraController? _controller;
  Future<void>? _initializeControllerFuture;
  bool _isFrontCamera = false;
  bool _isFlashOn = false;

  @override
  void initState() {
    super.initState();
    _initializeCamera();
  }

  Future<void> _initializeCamera() async {
    final cameras = await availableCameras();
    final camera = _isFrontCamera ? cameras.last : cameras.first;

    _controller = CameraController(camera, ResolutionPreset.high);
    _initializeControllerFuture = _controller?.initialize();

    if (mounted) {
      setState(() {});
    }
  }

  Future<void> _toggleCamera() async {
    await _controller?.dispose();
    _isFrontCamera = !_isFrontCamera;
    _initializeCamera();
  }

  Future<void> _toggleFlash() async {
    if (_isFlashOn) {
      await _controller?.setFlashMode(FlashMode.off);
    } else {
      await _controller?.setFlashMode(FlashMode.torch);
    }
    _isFlashOn = !_isFlashOn;
    setState(() {});
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    bool isExpanded = false;

    return SingleChildScrollView(
      child: Column(
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                isExpanded = !isExpanded;
              });
            },
            child: AnimatedSize(
              duration: const Duration(milliseconds: 200),
              curve: Curves.easeInOut,
              child: Container(
                height: isExpanded ? MediaQuery.of(context).size.height * 0.7 : MediaQuery.of(context).size.height * 0.3,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.deepPurple,
                ),
                child: _controller != null && _controller!.value.isInitialized
                    ? Stack(
                        children: [
                          CameraPreview(_controller!),
                          Align(
                            alignment: Alignment.topRight,
                            child: IconButton(
                              icon: Icon(
                                _isFlashOn ? Icons.flash_off : Icons.flash_on,
                                color: Colors.white,
                              ),
                              onPressed: _toggleFlash,
                            ),
                          ),
                          Align(
                            alignment: Alignment.bottomCenter,
                            child: Padding(
                              padding: const EdgeInsets.all(16),
                              child: ElevatedButton(
                                onPressed: () {
                                  // Capture logic here
                                },
                                child: Icon(
                                  Icons.camera,
                                  size: 48,
                                ),
                                style: ButtonStyle(
                                  shape: MaterialStateProperty.all<CircleBorder>(
                                    CircleBorder(),
                                  ),
                                  padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
                                    EdgeInsets.all(16),
                                  ),
                                  backgroundColor: MaterialStateProperty.all<Color>(
                                    Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      )
                    : Center(
                        child: CircularProgressIndicator(),
                      ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Make sure to add the camera package to your pubspec.yaml file:

YAML:
dependencies:
  camera: ^0.10.0

Please note that you may need to adjust the code according to your specific requirements and use the appropriate package for camera functionality in your app.
may error sa
CameraPreview(_controller!),
 
paki edit po ito. mag dadagdag lang ako ng function na kapag pinindot ang container, mag oopen ang camera ng device at ang sukat ng camera preview ay kasing laki ng container na expanded. ibig sabihin. kapag napindot na ang container, dun palang lalabas ang camera preview at kapag lumabas ang camera preview, meron itong button icon na flashlight on/off, capture, siwtch camera(rear or front)


SingleChildScrollView(
child: Column(
children: [
GestureDetector(
onTap: () {
setState(() {
isExpanded = !isExpanded;
});
},
child: AnimatedSize(
duration: const Duration(milliseconds: 200
),
curve: Curves.easeInOut,
child: Container(
height: isExpanded ? MediaQuery.of(context).size.height * 0.7 : MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.deepPurple,
),

child: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.camera,
color: Colors.white,
size: 48,
),
SizedBox(height: 10),
Text('CAMERA',
style: TextStyle(color: Colors.white, fontSize: 22),)
],
),
),
),
),
),
 
Sure! Here's the edited code with the added function to open the device's camera and set the camera preview size to match the expanded container. Additionally, there are buttons for flashlight on/off, capture, and switch camera (rear or front):

Code:
import 'package:camera/camera.dart';

// Define a global variable to store the camera instance
late CameraController _cameraController;
late List<CameraDescription> cameras;

// Get the available cameras
Future<void> getCameras() async {
  cameras = await availableCameras();
  // Set the first camera as the default
  _cameraController = CameraController(cameras[0], ResolutionPreset.medium);
  await _cameraController.initialize();
}

// Toggle flashlight
void toggleFlashlight() {
  if (_cameraController.value.flashMode == FlashMode.off) {
    _cameraController.setFlashMode(FlashMode.torch);
  } else {
    _cameraController.setFlashMode(FlashMode.off);
  }
}

// Capture image
void captureImage() async {
  final XFile imageFile = await _cameraController.takePicture();
  // Do something with the image file
}

// Switch camera
void switchCamera() async {
  final CameraDescription newCamera = _cameraController.description == cameras[0] ? cameras[1] : cameras[0];
  await _cameraController.dispose();
  _cameraController = CameraController(newCamera, ResolutionPreset.medium);
  await _cameraController.initialize();
}

class CameraScreen extends StatefulWidget {
  @override
  _CameraScreenState createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> {
  bool isExpanded = false;

  @override
  void initState() {
    super.initState();
    getCameras();
  }

  @override
  void dispose() {
    _cameraController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                isExpanded = !isExpanded;
              });
            },
            child: AnimatedSize(
              duration: const Duration(milliseconds: 200),
              curve: Curves.easeInOut,
              child: Container(
                height: isExpanded ? MediaQuery.of(context).size.height * 0.7 : MediaQuery.of(context).size.height * 0.3,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.deepPurple,
                ),
                child: isExpanded
                    ? Stack(
                        children: [
                          CameraPreview(_cameraController), // Camera preview
                          Positioned(
                            top: 20,
                            right: 20,
                            child: IconButton(
                              icon: Icon(
                                _cameraController.value.flashMode == FlashMode.off ? Icons.flash_off : Icons.flash_on,
                                color: Colors.white,
                              ),
                              onPressed: toggleFlashlight,
                            ),
                          ),
                          Positioned(
                            bottom: 20,
                            left: MediaQuery.of(context).size.width / 2 - 30,
                            child: IconButton(
                              icon: Icon(
                                Icons.camera,
                                color: Colors.white,
                                size: 60,
                              ),
                              onPressed: captureImage,
                            ),
                          ),
                          Positioned(
                            bottom: 20,
                            right: 20,
                            child: IconButton(
                              icon: Icon(
                                Icons.switch_camera,
                                color: Colors.white,
                              ),
                              onPressed: switchCamera,
                            ),
                          ),
                        ],
                      )
                    : Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.camera,
                              color: Colors.white,
                              size: 48,
                            ),
                            SizedBox(height: 10),
                            Text(
                              'CAMERA',
                              style: TextStyle(color: Colors.white, fontSize: 22),
                            )
                          ],
                        ),
                      ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Make sure to add the necessary dependencies in your pubspec.yaml file:

YAML:
dependencies:
  camera: ^0.10.1
  path_provider: ^2.0.2

Note: The code assumes you have the camera and path_provider packages already imported.
 
Sure! Here's the edited code with the added function to open the device's camera and set the camera preview size to match the expanded container. Additionally, there are buttons for flashlight on/off, capture, and switch camera (rear or front):

Code:
import 'package:camera/camera.dart';

// Define a global variable to store the camera instance
late CameraController _cameraController;
late List<CameraDescription> cameras;

// Get the available cameras
Future<void> getCameras() async {
  cameras = await availableCameras();
  // Set the first camera as the default
  _cameraController = CameraController(cameras[0], ResolutionPreset.medium);
  await _cameraController.initialize();
}

// Toggle flashlight
void toggleFlashlight() {
  if (_cameraController.value.flashMode == FlashMode.off) {
    _cameraController.setFlashMode(FlashMode.torch);
  } else {
    _cameraController.setFlashMode(FlashMode.off);
  }
}

// Capture image
void captureImage() async {
  final XFile imageFile = await _cameraController.takePicture();
  // Do something with the image file
}

// Switch camera
void switchCamera() async {
  final CameraDescription newCamera = _cameraController.description == cameras[0] ? cameras[1] : cameras[0];
  await _cameraController.dispose();
  _cameraController = CameraController(newCamera, ResolutionPreset.medium);
  await _cameraController.initialize();
}

class CameraScreen extends StatefulWidget {
  @override
  _CameraScreenState createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> {
  bool isExpanded = false;

  @override
  void initState() {
    super.initState();
    getCameras();
  }

  @override
  void dispose() {
    _cameraController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                isExpanded = !isExpanded;
              });
            },
            child: AnimatedSize(
              duration: const Duration(milliseconds: 200),
              curve: Curves.easeInOut,
              child: Container(
                height: isExpanded ? MediaQuery.of(context).size.height * 0.7 : MediaQuery.of(context).size.height * 0.3,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.deepPurple,
                ),
                child: isExpanded
                    ? Stack(
                        children: [
                          CameraPreview(_cameraController), // Camera preview
                          Positioned(
                            top: 20,
                            right: 20,
                            child: IconButton(
                              icon: Icon(
                                _cameraController.value.flashMode == FlashMode.off ? Icons.flash_off : Icons.flash_on,
                                color: Colors.white,
                              ),
                              onPressed: toggleFlashlight,
                            ),
                          ),
                          Positioned(
                            bottom: 20,
                            left: MediaQuery.of(context).size.width / 2 - 30,
                            child: IconButton(
                              icon: Icon(
                                Icons.camera,
                                color: Colors.white,
                                size: 60,
                              ),
                              onPressed: captureImage,
                            ),
                          ),
                          Positioned(
                            bottom: 20,
                            right: 20,
                            child: IconButton(
                              icon: Icon(
                                Icons.switch_camera,
                                color: Colors.white,
                              ),
                              onPressed: switchCamera,
                            ),
                          ),
                        ],
                      )
                    : Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.camera,
                              color: Colors.white,
                              size: 48,
                            ),
                            SizedBox(height: 10),
                            Text(
                              'CAMERA',
                              style: TextStyle(color: Colors.white, fontSize: 22),
                            )
                          ],
                        ),
                      ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Make sure to add the necessary dependencies in your pubspec.yaml file:

YAML:
dependencies:
  camera: ^0.10.1
  path_provider: ^2.0.2

Note: The code assumes you have the camera and path_provider packages already imported.
pwede paki lagyan ng size ang camera preview at border radius circular
 
pwede paki lagyan ng size ang camera preview at border radius circular
Certainly! Here's the modified code with the camera preview sized and the container having a circular border radius:

Code:
import 'package:camera/camera.dart';

// Define a global variable to store the camera instance
late CameraController _cameraController;
late List<CameraDescription> cameras;

// Get the available cameras
Future<void> getCameras() async {
  cameras = await availableCameras();
  // Set the first camera as the default
  _cameraController = CameraController(cameras[0], ResolutionPreset.medium);
  await _cameraController.initialize();
}

// Toggle flashlight
void toggleFlashlight() {
  if (_cameraController.value.flashMode == FlashMode.off) {
    _cameraController.setFlashMode(FlashMode.torch);
  } else {
    _cameraController.setFlashMode(FlashMode.off);
  }
}

// Capture image
void captureImage() async {
  final XFile imageFile = await _cameraController.takePicture();
  // Do something with the image file
}

// Switch camera
void switchCamera() async {
  final CameraDescription newCamera = _cameraController.description == cameras[0] ? cameras[1] : cameras[0];
  await _cameraController.dispose();
  _cameraController = CameraController(newCamera, ResolutionPreset.medium);
  await _cameraController.initialize();
}

class CameraScreen extends StatefulWidget {
  @override
  _CameraScreenState createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> {
  bool isExpanded = false;

  @override
  void initState() {
    super.initState();
    getCameras();
  }

  @override
  void dispose() {
    _cameraController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                isExpanded = !isExpanded;
              });
            },
            child: AnimatedSize(
              duration: const Duration(milliseconds: 200),
              curve: Curves.easeInOut,
              child: Container(
                height: isExpanded ? MediaQuery.of(context).size.height * 0.7 : MediaQuery.of(context).size.height * 0.3,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.deepPurple,
                ),
                child: isExpanded
                    ? ClipRRect(
                        borderRadius: BorderRadius.circular(20),
                        child: CameraPreview(_cameraController), // Camera preview
                      )
                    : Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.camera,
                              color: Colors.white,
                              size: 48,
                            ),
                            SizedBox(height: 10),
                            Text(
                              'CAMERA',
                              style: TextStyle(color: Colors.white, fontSize: 22),
                            )
                          ],
                        ),
                      ),
              ),
            ),
          ),
          if (isExpanded)
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  icon: Icon(
                    _cameraController.value.flashMode == FlashMode.off ? Icons.flash_off : Icons.flash_on,
                    color: Colors.white,
                  ),
                  onPressed: toggleFlashlight,
                ),
                IconButton(
                  icon: Icon(
                    Icons.camera,
                    color: Colors.white,
                    size: 48,
                  ),
                  onPressed: captureImage,
                ),
                IconButton(
                  icon: Icon(
                    Icons.switch_camera,
                    color: Colors.white,
                  ),
                  onPressed: switchCamera,
                ),
              ],
            ),
        ],
      ),
    );
  }
}

Make sure to add the necessary dependencies in your pubspec.yaml file:

YAML:
dependencies:
  camera: ^0.10.1
  path_provider: ^2.0.2

Note: The code assumes you have the camera and path_provider packages already imported.
 
Certainly! Here's the modified code with the camera preview sized and the container having a circular border radius:

Code:
import 'package:camera/camera.dart';

// Define a global variable to store the camera instance
late CameraController _cameraController;
late List<CameraDescription> cameras;

// Get the available cameras
Future<void> getCameras() async {
  cameras = await availableCameras();
  // Set the first camera as the default
  _cameraController = CameraController(cameras[0], ResolutionPreset.medium);
  await _cameraController.initialize();
}

// Toggle flashlight
void toggleFlashlight() {
  if (_cameraController.value.flashMode == FlashMode.off) {
    _cameraController.setFlashMode(FlashMode.torch);
  } else {
    _cameraController.setFlashMode(FlashMode.off);
  }
}

// Capture image
void captureImage() async {
  final XFile imageFile = await _cameraController.takePicture();
  // Do something with the image file
}

// Switch camera
void switchCamera() async {
  final CameraDescription newCamera = _cameraController.description == cameras[0] ? cameras[1] : cameras[0];
  await _cameraController.dispose();
  _cameraController = CameraController(newCamera, ResolutionPreset.medium);
  await _cameraController.initialize();
}

class CameraScreen extends StatefulWidget {
  @override
  _CameraScreenState createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> {
  bool isExpanded = false;

  @override
  void initState() {
    super.initState();
    getCameras();
  }

  @override
  void dispose() {
    _cameraController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                isExpanded = !isExpanded;
              });
            },
            child: AnimatedSize(
              duration: const Duration(milliseconds: 200),
              curve: Curves.easeInOut,
              child: Container(
                height: isExpanded ? MediaQuery.of(context).size.height * 0.7 : MediaQuery.of(context).size.height * 0.3,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.deepPurple,
                ),
                child: isExpanded
                    ? ClipRRect(
                        borderRadius: BorderRadius.circular(20),
                        child: CameraPreview(_cameraController), // Camera preview
                      )
                    : Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.camera,
                              color: Colors.white,
                              size: 48,
                            ),
                            SizedBox(height: 10),
                            Text(
                              'CAMERA',
                              style: TextStyle(color: Colors.white, fontSize: 22),
                            )
                          ],
                        ),
                      ),
              ),
            ),
          ),
          if (isExpanded)
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  icon: Icon(
                    _cameraController.value.flashMode == FlashMode.off ? Icons.flash_off : Icons.flash_on,
                    color: Colors.white,
                  ),
                  onPressed: toggleFlashlight,
                ),
                IconButton(
                  icon: Icon(
                    Icons.camera,
                    color: Colors.white,
                    size: 48,
                  ),
                  onPressed: captureImage,
                ),
                IconButton(
                  icon: Icon(
                    Icons.switch_camera,
                    color: Colors.white,
                  ),
                  onPressed: switchCamera,
                ),
              ],
            ),
        ],
      ),
    );
  }
}

Make sure to add the necessary dependencies in your pubspec.yaml file:

YAML:
dependencies:
  camera: ^0.10.1
  path_provider: ^2.0.2

Note: The code assumes you have the camera and path_provider packages already imported.
kapag naclick na ang container paki lagyan rin po ng flashlight icon button, capture button, switch camera button. kapag naclick na ang container, tska palang lalabas ang mga button
 
paki edit po itong code, paki lagyan po ng flashlight icon button, capture button, switch camera button. kapag naclick na ang container, tska palang lalabas ang mga button
import 'package:camera/camera.dart';

// Define a global variable to store the camera instance
late CameraController _cameraController;
late List<CameraDescription> cameras;

// Get the available cameras
Future<void> getCameras() async {
cameras = await availableCameras();
// Set the first camera as the default
_cameraController = CameraController(cameras[0], ResolutionPreset.medium);
await _cameraController.initialize();
}

// Toggle flashlight
void toggleFlashlight() {
if (_cameraController.value.flashMode == FlashMode.off) {
_cameraController.setFlashMode(FlashMode.torch);
} else {
_cameraController.setFlashMode(FlashMode.off);
}
}

// Capture image
void captureImage() async {
final XFile imageFile = await _cameraController.takePicture();
// Do something with the image file
}

// Switch camera
void switchCamera() async {
final CameraDescription newCamera = _cameraController.description == cameras[0] ? cameras[1] : cameras[0];
await _cameraController.dispose();
_cameraController = CameraController(newCamera, ResolutionPreset.medium);
await _cameraController.initialize();
}

class CameraScreen extends StatefulWidget {
Override
_CameraScreenState createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> {
bool isExpanded = false;

Override
void initState() {
super.initState();
getCameras();
}

Override
void dispose() {
_cameraController.dispose();
super.dispose();
}

Override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
GestureDetector(
onTap: () {
setState(() {
isExpanded = !isExpanded;
});
},
child: AnimatedSize(
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
child: Container(
height: isExpanded ? MediaQuery.of(context).size.height * 0.7 : MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.deepPurple,
),
child: isExpanded
? ClipRRect(
borderRadius: BorderRadius.circular(20),
child: CameraPreview(_cameraController), // Camera preview
)
: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.camera,
color: Colors.white,
size: 48,
),
SizedBox(height: 10),
Text(
'CAMERA',
style: TextStyle(color: Colors.white, fontSize: 22),
)
],
),
),
),
),
),
if (isExpanded)
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: Icon(
_cameraController.value.flashMode == FlashMode.off ? Icons.flash_off : Icons.flash_on,
color: Colors.white,
),
onPressed: toggleFlashlight,
),
IconButton(
icon: Icon(
Icons.camera,
color: Colors.white,
size: 48,
),
onPressed: captureImage,
),
IconButton(
icon: Icon(
Icons.switch_camera,
color: Colors.white,
),
onPressed: switchCamera,
),
],
),
],
),
);
}
}
 

Similar threads

Back
Top