Flutter Widget- Source code View Example

Flutter Source Code View

Flutter is an open-source app development framework created by Google. It is used to build both iOS and Android mobile apps, and it uses the Dart programming language. Flutter has a number of features that make it unique, including its core philosophy of embracing the platform instead of abstracting it. With Flutter, developers can create beautiful native apps for both iOS and Android with no compromise.

if you Want to Know more about Flutter-

In this tutorial learn, how to show dart source code in your flutter project By WidgetWithCodeView(). SourceCodeView() using you can your source code in your Flutter application.

Dependencies: (null Safe)

widget_with_codeview: ^2.0.0-nullsafe

Dependencies: (without null safe)

widget_with_codeview: ^1.0.5


        sourceFilePath: 'lib/TestPage.dart', // File Location
        child: TestPage(), // DartFile Class Name

Flutter Source Code View Tutorial:

Flutter SourceCodeView

Flutter Widget SourceCodeView Project Code Example:

import 'package:flutter/material.dart';
import 'package:flutter_project/TestPage.dart';
import 'package:widget_with_codeview/source_code_view.dart';
import 'package:widget_with_codeview/widget_with_codeview.dart';

void main() {
    debugShowCheckedModeBanner: false,
    home: MyApp(),

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

  _MyAppState createState() => _MyAppState();

class _MyAppState extends State <MyApp> {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test App'),
      body: WidgetWithCodeView(
        sourceFilePath: 'lib/TestPage.dart',
        child: TestPage(),
import 'package:flutter/material.dart';

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

  _TestPageState createState() => _TestPageState();

class _TestPageState extends State <TestPage> {
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 250,
        height: 250,
        color: Colors.red,
        child: Center(
          child: Text('Preview Page',style: TextStyle(
            fontWeight: FontWeight.w900,
            fontSize: 30,
            color: Colors.white
name: flutter_project
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.2.0+2

  sdk: "">=2.12.0 3.0.0""

    sdk: flutter
  widget_with_codeview: ^2.0.0-nullsafe

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
     - lib/TestPage.dart

  # An image asset can refer to one or more resolution-specific ""variants"", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this ""flutter"" section. Each entry in this list should have a
  # ""family"" key with the font family name, and a ""fonts"" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages
  • How to Get SHA1 key in Flutter|SHA-256 Flutter Firebase
    How to Get SHA1 key in Flutter for firebase | SHA-1 or SHA-256 key generate Flutter firebase tutorials. SHA-1 Fingerprint Certificate
  • Animated Default Text Style Flutter – Widget Tutorial
    Animated Default text style for flutter. Flutter Text Animation:- AnimatedDefalutTextStyle() Code Example: Text Animation: Flutter Animation Code Example: READ ALSO …  Flutter Hero widget – example code
  • How to Create Scrollable Flutter Table | DataTable
    You Can Create easily Flutter Table with this DataTable() Widget. Then You need columns and rows for the table. columns called DataColumn() and rows called DataRow(). DataColumn() insert label set Value and DataRow() insert DataCell() set Value. DataTable() Code Example: How To Create Flutter DataTable: READ ALSO …  How to create avatar glow flutter animations
  • How to set Flutter Orientation Portrait Or Landscape Only
    If you want to set Fixed Flutter Orientation for your application You need import first service. Code Example: Some Value For Device Orientation : Orientation Project Code Example: Flutter Orientation Portrait Or Landscape Only READ ALSO …  How to Get SHA1 key in Flutter|SHA-256 Flutter Firebase
  • Animated CurvedNavigationBar Flutter Tutorial
    Flutter CurvedNavigationBar In This Tutorial, you can learn how to design CurvedNavigationBar to use in your flutter project. With the carved navigation Bar Flutter package using you can modify your navigation Bar. Import CarvedNavigationBar: Widget CarvedNavigationBar: CurvedNavigationBar Flutter Tutorial: Now Sharing this tutorial full project code CurvedNavigationBar. You can use this coding for practice. When …

    Read more …

Leave a Comment