Home / Uncategories / Flutter Horizontal Scroll

Flutter Horizontal Scroll

- Edit

import 'package:flutter/material.dart';

void main() => runApp(MainApp());

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.red,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grid View'),
      ),
      body: Container(
        height: 200.0,
        child: GridView.count(
          primary: false,
          padding: const EdgeInsets.all(20),
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          crossAxisCount: 2,
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                "https://media1.santabanta.com/full5/Indian%20%20Celebrities(F)/Kritika%20Sobti/kritika-sobti-1a.jpg",
                height: 150.0,
                width: 100.0,
                fit: BoxFit.cover,
              ),
            ),
          ],
        ),
      ),
    );
  }
}


Output:


Share on Google Plus

About Ram Pukar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment

0 comments:

Post a Comment

Subscribe to: Post Comments ( Atom )